1、安装vite
npm init vite
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
6、总结
electron其实就是个壳子，可以让前端直接用node的功能，原理是利用一个中间桥梁js进行通信。
