本文包括vue3的基礎環(huán)境搭建和electron配置癣丧，全TS。全部技術棧為：vue3+ts+antdv+vite+electron骤视。
由于electron配置相對簡單鞍爱，我們先配置好vue再配置electron。
vue3環(huán)境搭建
- 由于我們使用vite专酗，直接執(zhí)行
npm init vite ${項目文件夾} -- --template vue即可硬霍，會自動生成模板項目，然后進去執(zhí)行npm install笼裳∥簦可以看到，這個模板項目很簡單躬柬，只需要一個配置文件vite.config.js就夠了拜轨。 - 由于我們要用antdv，全量導入一點都不優(yōu)雅允青，而且全量導入不方便自動補全￠夏耄現(xiàn)在有更好的解決方案，那就是antfu的
unplugin-vue-components插件颠锉。安裝插件和antdv：
npm i --save typescript
npm i unplugin-vue-components -D
#我使用的是antdv 3.X法牲，現(xiàn)在穩(wěn)定版為2.X，把beta改成next就是2.X版本了
npm i --save ant-design-vue@beta
npm i --save @ant-design/icons-vue
然后配置vite.config.js琼掠，完整的配置文件如下：
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import Components from "unplugin-vue-components/vite"
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers"
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({ dts: true, resolvers: [AntDesignVueResolver()] }),
],
base: "./",
})
由于electron加載本地頁面用的是相對路徑拒垃，需要配置base: "./",。
unplugin-vue-components插件可以實現(xiàn)默認引用瓷蛙，直接在代碼里面寫即可悼瓮，不需要手動引用antv的組件（antdv的icons還是要手動引用的），而且會自動生成聲明文件艰猬。
- 打開vue文件横堡，可以看到默認直接使用的是vue3的語法，而且用的還是文檔不全的
<script setup>冠桃。我們改成<script setup lang="ts">啟用ts支持命贴。<script setup>的坑有很多，只看文檔還是會一臉懵逼，后續(xù)我還會寫一篇<script setup>的踩坑記錄胸蛛，更新后放上來培己。
可以看到，vite的配置很簡單胚泌，甚至都不需要指定入口文件省咨，那是因為vite默認認為當前文件夾的index.html文件就是入口，所以配置可以忽略不寫玷室。如果vue的入口js改了零蓉，比如從/src/main.js變成了/src/main.ts，直接改html就可以了穷缤，vite會識別敌蜂。
而unplugin-vue-components插件用過之后，我們就可以寫下面這樣的代碼了：
<script setup lang="ts">
function selected(name: string) {
console.log("get " + name)
}
</script>
<template>
<a-layout style="height: '100%'">
<a-layout-header>Header</a-layout-header>
<a-layout>
<a-layout-sider
:style="{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
}"
>
<my-menu @select="selected" />
</a-layout-sider>
<a-layout-content>Content</a-layout-content>
</a-layout>
</a-layout>
</template>
不管是antdv的組件（a-layout）津肛，還是自己的組件（my-menu）章喉，可以無聲明直接用。
以上身坐，vue3部分就已經(jīng)搞定了秸脱。順便吐槽一下，上了vue3之后slot也有參數(shù)了部蛇，但是antdv壓根沒有slot參數(shù)表摊唇，源碼也看不到，只能看代碼示例去猜涯鲁，就很煩巷查。
electron配置
- 安裝：
npm i -D electron@latest - 配置，在
package.json加上入口文件："main": "back/index.js",抹腿，scripts里面加上"start": "NODE_ENV='dev' electron .","watch": "tsc --watch",岛请，然后加tsconfig.json：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"removeComments": true,
"moduleResolution": "node"
},
"include": ["back/*.ts"]
}
這里我把electron的入口文件放在文件夾back里面，是back/index.ts警绩。內(nèi)容如下
import { app, BrowserWindow } from "electron"
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
})
if (process.env.NODE_ENV == "dev") {
win.loadURL("http://127.0.0.1:3000")
//win.webContents.openDevTools()
} else {
win.loadFile("dist/index.html")
}
}
app.whenReady().then(() => {
createWindow()
app.on("activate", function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
一般不會修改這個文件崇败，所以watch執(zhí)行一次后可以中斷，沒有改動不需要執(zhí)行房蝉。electron只能識別js僚匆，且target為es5。electron 16+就不支持命令行rs讓它重啟了搭幻，差評……一般開發(fā)只需要在普通瀏覽器開發(fā)即可，electron只做打包功能逞盆。
到這里檀蹋，完整的環(huán)境就都搞定。隨著時代發(fā)展，搭環(huán)境越來越簡單了俯逾，配置也少了不少贸桶，挺好的。其他可能遇到的問題桌肴，大家可以參閱我很久之前寫的文章皇筛。部分修正如下。
ipc相關
在之前那篇文章中處理ipc問題是簡單粗暴地配置nodeIntegration: true坠七，但是這樣會有安全問題水醋，而且electron 16+這樣做也失效了。更好的解決方案可以見這里彪置，核心是用preload腳本進行注入拄踪。關鍵代碼如下：
main.js
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // is default value after Electron v5
contextIsolation: true, // protect against prototype pollution
preload: path.join(__dirname, "preload.js") // use a preload script
}
});
ipcMain.on("toMain", (event, args) => {
fs.readFile("path/to/file", (error, data) => {
win.webContents.send("fromMain", responseObj);
});
});
preload.js
const {
contextBridge,
ipcRenderer
} = require("electron");
// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
"api", {
send: (channel, data) => {
// 事件白名單，懶的話可以不寫直接send
let validChannels = ["toMain"];
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
receive: (channel, func) => {
// 同上
let validChannels = ["fromMain"];
if (validChannels.includes(channel)) {
// Deliberately strip event as it includes `sender`
ipcRenderer.on(channel, (event, ...args) => func(...args));
}
}
}
);
index.html
window.api.receive("fromMain", (data) => {
console.log(`Received ${data} from main process`);
});
window.api.send("toMain", "some data");
打包
之前打包用到了electron-forge拳魁，但是事實上完全不需要惶桐，我們可以手動打包（如果你要打成windows的msi、exe安裝包潘懊，或者dmg姚糊、dep包之類的還是需要它）。手動打包方式支持全平臺授舟，每個平臺都會打成一個zip包叛拷，點開即可使用。
背景
electron本質(zhì)只是一個啟動器岂却，默認會從resources/app里面讀取配置文件package.json忿薇，如果沒有會使用默認的default_app.asar（一般打包時都會刪掉這個文件）。那么我們下載好對應平臺的electron躏哩，然后把自己的東西放在resources/app文件夾里面署浩，就可以正常運行了。
操作
- 去阿里源下載最新的
electron扫尺，需要什么平臺就下什么平臺的zip包筋栋。 - 解壓縮，然后創(chuàng)建
app文件夾正驻。mac版本在/Contents/Resources/app弊攘，windows在resources/app，linux應該和windows類似姑曙。 - 打包自己的項目襟交，如果目錄結構是按照此文描述的這樣，那么可以得到
back和dist文件夾伤靠，分別對應electron入口和html入口捣域。 - 將這兩個文件夾和配置文件
package.json放進app文件夾，壓縮成zip文件。
這樣就可以得到各個平臺的打包文件了焕梅。相對于electron-forge迹鹅，更快更方便，也不需要忍受electron漫長的下載過程贞言。
