vite+vue3+electron搭建项目

编辑器使用vscode，打开一个空文件夹

第一步初始化vite项目

初始化vite项目，命令 npm init vite

在这里插入图片描述

第二步下载依赖

进入新建的项目，下载依赖，命令 
cd vite-projec 
npm i

在这里插入图片描述

第三步使用cnpm下载 electron依赖

新建一个终端，确认在项目目录下，运行命令 
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm i electron -D
成功将在package.json里面新增electron依赖

在这里插入图片描述

第四步新建main.js文件与入口

1、项目目录下新建main.js文件
2、package.json里面新增配置  "main": "main.js",

在这里插入图片描述
main.js内容如下：

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800
    })
	// 如果没有修改vite端口 默认为5173
    win.loadURL("http://localhost:5173")
}

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

第五步安装nodemon启动eletron

Nodemon 是一款非常实用的工具，用来监控你 node.js 源代码的任何变化和自动重启你的服务器。
查看帮助命令 npx nodemon --help
1、安装命令 
cnpm i nodemon -D
2、package.json文件新增启动命令
"start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"

在这里插入图片描述

运行 npm start ，如果运行出错，删掉package.json里面 “type”: “module”,