更新時(shí)間 20210823
注意：electron 很難很難很難 安裝瓦盛，有梯子最好
1、配置yarn
#yarn 配置方法
yarn config set registry https://registry.npm.taobao.org/
yarn config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/
yarn config set electron_mirror https://cdn.npm.taobao.org/dist/electron/
#文件配置方法
進(jìn)入文件路徑 C:\Users\用戶名\.yarnrc
#文件添加以下內(nèi)容
ELECTRON_BUILDER_BINARIES_MIRROR "http://npm.taobao.org/mirrors/electron-builder-binaries/"
electron_mirror "https://cdn.npm.taobao.org/dist/electron/"
registry "https://registry.npm.taobao.org/"
#npm 配置方法
npm config edit
# 在彈出的ini文件中修改：
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
electron_mirror=https://cdn.npm.taobao.org/dist/electron/
registry=https://registry.npm.taobao.org/
***無關(guān)教程---請忽略
1棱貌、查看一下當(dāng)前源
yarn config get registry
2、切換為淘寶源
yarn config set registry https://registry.npm.taobao.org
3箕肃、或者切換為自帶的
yarn config set registry https://registry.yarnpkg.com
2婚脱、建vite+vue
# 創(chuàng)建項(xiàng)目目錄
electron-vite-vue
# 進(jìn)入項(xiàng)目目錄
cd electron-vite-vue
# 創(chuàng)建項(xiàng)目
yarn create @vitejs/app electron-vite-vue --template vue
# 安裝依賴
yarn
# 運(yùn)行項(xiàng)目
yarn dev
3、引入electron
# 安裝
yarn add --dev electron
# 注意
安裝過程會出現(xiàn)網(wǎng)路問題勺像，解決方法
1障贸、配置第一步內(nèi)容
2、梯子
4吟宦、增加electron需要用到的文件
# 項(xiàng)目根目錄添加
main.js
preload.js
image.png
5篮洁、配置main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('dist/index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
6、配置preload.js
# 按照electron最新的思路督函，vue頁面中不能使用nodejs和electron嘀粱，electron手冊中要求通過preload.js隔離vue頁面和main.js的交互激挪。
# 這是electron手冊中的原文
# This feature is incredibly useful for two main purposes:
# By exposing ipcRenderer(https://www.electronjs.org/docs/latest/api/ipc-renderer/) helpers to the renderer, you can use inter-process communication (IPC) to trigger main process tasks from the renderer (and vice-versa).
# If you're developing an Electron wrapper for an existing web app hosted on a remote URL, you can add custom properties onto the renderer's `window` global that can be used for desktop-only logic on the web client's side.
# 在preload.js中添加
const { contextBridge } = require('electron')
// 在vue頁面中引用window.$electron.titile，獲得 'electron-vite-vue'
contextBridge.exposeInMainWorld('$electron', {
title: 'electron-vite-vue'
})
# 修改src/app.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<!--修改--><HelloWorld :msg="message" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
// 引用preload.js中定義的常量
const message = window.$electron.title
// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>
7锋叨、修改vite項(xiàng)目配置文件
# 修改vite.config.js 文件垄分，配置app項(xiàng)目根路徑
base: path.resolve(__dirname, './dist')
# 全文
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
base: path.resolve(__dirname, './dist'),
plugins: [vue()]
})
8、修改package.json文件
# electron main 入口配置
"main": "main.js",
# electron 啟動腳本配置
"electron:start": "vite build & electron ."
# 全文
{
"name": "electron-vite-vue",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"scripts": {
"electron:start": "vite build & electron ."
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.3.0",
"@vue/compiler-sfc": "^3.0.5",
"electron": "^13.2.1",
"vite": "^2.4.4"
}
}
9娃磺、啟動項(xiàng)目
yarn electron:start
npm run electron:start
10薄湿、展示
image.png
11、應(yīng)用打包
# 待更新
