本文包括vue3的基础环境搭建和electron配置，全TS。全部技术栈为：vue3+ts+antdv+vite+electron。
由于electron配置相对简单，我们先配置好vue再配置electron。

vue3环境搭建

1. 由于我们使用vite，直接执行npm init vite ${项目文件夹} -- --template vue即可，会自动生成模板项目，然后进去执行npm install。可以看到，这个模板项目很简单，只需要一个配置文件vite.config.js就够了。
2. 由于我们要用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还是要手动引用的），而且会自动生成声明文件。

3. 打开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配置

1. 安装：npm i -D electron@latest
2. 配置，在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文件夹里面，就可以正常运行了。

操作

1. 去阿里源下载最新的electron，需要什么平台就下什么平台的zip包。
2. 解压缩，然后创建app文件夹。mac版本在/Contents/Resources/app，windows在resources/app，linux应该和windows类似。
3. 打包自己的项目，如果目录结构是按照此文描述的这样，那么可以得到back和dist文件夹，分别对应electron入口和html入口。
4. 将这两个文件夹和配置文件package.json放进app文件夹，压缩成zip文件。

这样就可以得到各个平台的打包文件了。相对于electron-forge，更快更方便，也不需要忍受electron漫长的下载过程。