node环境不过多赘述,自行搭配
1、安装脚手架
npm install -g @vue/cli
2、创建vue3+vite项目
npm init vite@latest
如上所示:需要你输入你的项目名称
如上所示:这里需要你选择框架,按键盘上下键选择vue按回车
如上所示:这里我用的是js所以选择js
看到这个说明你已经创建了一个vue3+vite的项目,但是不能跑起来,需要下载依赖,根据给出的提示做就行
cd ./vueproject
npm install
测试一下你的项目是否能跑起来
npm run dev
2、安装electron并配置
npm install -D electron
3、安装electron热部署
npm i nodemo -D
4、在项目下创建目录electron并在里面建两个main.js、preload.js
5、main.js是主进程,这下面是基本的代码结构
const { app, protocol, BrowserWindow, globalShortcut } = require('electron')
// 需在当前文件内开头引入 Node.js 的 'path' 模块
const path = require('path')
app.commandLine.appendSwitch("--ignore-certificate-errors", "true");
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: "app", privileges: { secure: true, standard: true } }
]);
const createWindow = () => {
const win = new BrowserWindow({
minWidth: 960,
minHeight: 540,
width: 960,
height: 540,
//窗口是否在屏幕居中. 默认值为 false
center: true,
//设置为 false 时可以创建一个无边框窗口 默认值为 true。
frame: false,
//窗口是否在创建时显示。 默认值为 true。
show: true,
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
preload: path.join(__dirname, 'preload.js'),
webSecurity: false,
}
})
win.setMenu(null)
if (app.isPackaged) {
win.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`)
} else {
win.loadURL('http://127.0.0.1:5173/')
//win.loadURL('http://localhost:5173/')
win.webContents.openDevTools()
}
globalShortcut.register("CommandOrControl+Shift+i", function () {
win.webContents.openDevTools();
});
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
6、preload.js的代码
// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})
7、配置package.json,配置electron主进程文件路径,以及项目启动命令
"main": "electron/main.js"
"scripts": {
"start": "vite | nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
}
这里需要注意的是:你需要将"type":"model"去掉,不然会报错
8、命令行启动项目试试水
npm start
如果npm start报错可以替换成:"start": "vite | electron ."
9、如果项目跑起来是空白页说明是因为vite跑起来之后默认的地址是127.0.0.1不是localhost,我们重新指定一下main.js中的win.loadURL就行
main.js
// win.loadURL('http://127.0.0.1:5173/')
win.loadURL('http://localhost:5173/')
10、除了安装electron以外我还安装了热部署,窗口状态管理,electron打包工具
//状态管理工具
npm i electron-win-state -D
//electron的打包工具
npm i electron-builder -D
//这个是热部署监听的,前面已经装了
npm i nodemo -D
完结,撒花