本文包括vue3的基础环境搭建和electron配置，全TS。全部技术栈为：vue3+ts+antdv+vite+electron。
由于electron配置相对简单，我们先配置好vue再配置electron。
vue3环境搭建
- 由于我们使用vite，直接执行
npm init vite ${项目文件夹} -- --template vue即可，会自动生成模板项目，然后进去执行npm install。可以看到，这个模板项目很简单，只需要一个配置文件vite.config.js就够了。 - 由于我们要用antdv，全量导入一点都不优雅，而且全量导入不方便自动补全。现在有更好的解决方案，那就是antfu的
unplugin-vue-components插件。安装插件和antdv：
npm i --save typescript
npm i unplugin-vue-components -D
#我使用的是antdv 3.X，现在稳定版为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插件可以实现默认引用，直接在代码里面写即可，不需要手动引用antv的组件（antdv的icons还是要手动引用的），而且会自动生成声明文件。
- 打开vue文件，可以看到默认直接使用的是vue3的语法，而且用的还是文档不全的
<script setup>。我们改成<script setup lang="ts">启用ts支持。<script setup>的坑有很多，只看文档还是会一脸懵逼，后续我还会写一篇<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部分就已经搞定了。顺便吐槽一下，上了vue3之后slot也有参数了，但是antdv压根没有slot参数表，源码也看不到，只能看代码示例去猜，就很烦。
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。内容如下
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执行一次后可以中断，没有改动不需要执行。electron只能识别js，且target为es5。electron 16+就不支持命令行rs让它重启了，差评……一般开发只需要在普通浏览器开发即可，electron只做打包功能。
到这里，完整的环境就都搞定。随着时代发展，搭环境越来越简单了，配置也少了不少，挺好的。其他可能遇到的问题，大家可以参阅我很久之前写的文章。部分修正如下。
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本质只是一个启动器，默认会从resources/app里面读取配置文件package.json，如果没有会使用默认的default_app.asar（一般打包时都会删掉这个文件）。那么我们下载好对应平台的electron，然后把自己的东西放在resources/app文件夹里面，就可以正常运行了。
操作
- 去阿里源下载最新的
electron，需要什么平台就下什么平台的zip包。 - 解压缩，然后创建
app文件夹。mac版本在/Contents/Resources/app，windows在resources/app，linux应该和windows类似。 - 打包自己的项目，如果目录结构是按照此文描述的这样，那么可以得到
back和dist文件夹，分别对应electron入口和html入口。 - 将这两个文件夹和配置文件
package.json放进app文件夹，压缩成zip文件。
这样就可以得到各个平台的打包文件了。相对于electron-forge，更快更方便，也不需要忍受electron漫长的下载过程。
