vue3+electron安装过程

1、安装vite

npm init vite

按照提示，可以直接生成vue3项目。

2、安装electron

npm i -g cnpm --registry=http://registry.npmmirror.com
cnpm i electron -D

这里需要注意的是得用cnpm安装，用npm会有拉不下来镜像的问题，得切换到国内的镜像。
3、安装nodemon

cnpm i nodemon -D

这个可以热更新electron的代码。
4、配置文件。
根目录新建main.js：

const { app, BrowserWindow } = require('electron');
const createWindow = () => {

    const win = new BrowserWindow({
        width: 800,
        height: 600,
    });
    win.loadURL('http://localhost:5173');
}
app.whenReady().then(() => {
    createWindow();
});

这是创建一个应用窗口。
package.json:

{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "main":"main.js",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview",
    "start":"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
  },
  "dependencies": {
    "vue": "^3.4.31"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "electron": "^31.2.1",
    "typescript": "^5.2.2",
    "vite": "^5.3.4",
    "vue-tsc": "^2.0.24"
  }
}

指定了入口，然后新建一个start命令。
5、运行

npm run dev
npm start

先启动vue，然后再启动electron。上线后，要把线上地址填到main.js里面。

6、总结
electron其实就是个壳子，可以让前端直接用node的功能，原理是利用一个中间桥梁js进行通信。