vue+vite+electron项目初始化

首先，创建一个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

 完活