首先,创建一个vite项目,Vite | 下一代的前端工具链
npm create vite@latest
随后安装electron,安装失败试试这个
使用命令:npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
然后执行下边这个:
npm install electron
安装完毕后新建main.cjs,作为electron的入口文件
const {BrowserWindow, app} = require("electron")
const {fastKey} = require("yarn/lib/cli.js");
const createWin = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
maximizable:false
})
win.loadURL("http://127.0.0.1:5173/").then(r => {})
win.setMenu(null)
}
app.whenReady().then(() => {
createWin()
})
安装concurrently
npm install concurrently
安装完毕后在,package.json中进行配置
配置脚本
整体package.json,别无脑复制
{
"name": "xxx",
"private": true,
"version": "0.0.0",
"type": "module",
"main": "main.cjs",
"scripts": {
"dev": "concurrently \"vite\" \"electron .\"",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"concurrently": "^8.1.0",
"electron": "^25.0.1",
"element-plus": "^2.3.6",
"vue": "^3.2.47",
"yarn": "^1.22.19"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",
"typescript": "^5.0.2",
"unplugin-auto-import": "^0.16.4",
"unplugin-vue-components": "^0.25.0",
"vite": "^4.3.9",
"vue-tsc": "^1.4.2"
}
}
启动项目,npm run dev
完活