【（一）Electron 使用之如何用vite+vue3搭建初始框架】

一叶飘零晋2026-04-30 13:29

一、用vite 搭建框架

1、输入命令cnpm init vite

cpp 复制代码

cnpm init vite

2、输入项目名称 readit 选择vue框架

3、选择TypeScript

4、将入创建项目目录下用命令添加相关包

cpp 复制代码

cd readit
cnpm i

4、添加electron

cpp 复制代码

npm install electron@19.0.8

5、在目录下新建main.js 添加electron 代码

cpp 复制代码

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

const createWindow = ()=>{
    const win = new BrowserWindow({
        width:1000,
        height:800
    })

    win.loadURL('http://localhost:3000/')
}

app.whenReady().then(()=>{
    createWindow()
})

6、修改package.json 添加

cpp 复制代码

"main":"main.js",

7、添加nodemon 工具其作用是但你修改代码时程序能实时刷新方便调试

cpp 复制代码

 npm i nodemon -D

修改package.json 添加

cpp 复制代码

"start":"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"

8、开两个终端

第一个运行vue

cpp 复制代码

npm run dev

第二个终端运行electron

cpp 复制代码

npm start

此时报错

解决办法：

修改package.json 删除"type": "module"

再次运行

cpp 复制代码

npm start

运行成功