如何使用yarn创建vite+vue3&&electron多端运行
作者：代码の搬运工
这篇文章主要介绍了如何使用yarn创建vite+vue3&&electron多端运行,本文分步骤给大家介绍的非常详细，包括使用yarn创建vite+vue3项目会遇到哪些问题，感兴趣的朋友跟随小编一起看看吧
第一步 使用yarn创建vite+vue3项目
yarn create vite
遇到创建报错看
第二步 引入electron
我这里用的是淘宝镜像下载的包
cnpm install electron --save-dev
第三步 创建main.js
- 在根目录创建electron文件夹
- 在electron 文件夹下面创建
main.js
在electron下面的main.js写入下面代码
const { app, BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 1024,
height: 768,
webPreferences: {
nodeIntegration: true
}
});
win.loadURL('http://localhost:5173'); // Vite 默认的开发服务器地址
win.webContents.openDevTools();
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});第四步 安装同时运行多条命令npm包&&修改package.json文件
npm包
cnpm install concurrently --save-dev
增加一条electron运行脚本命令
"start:electron": "concurrently \"vite\" \"electron .\""
以下完整代码
{
"name": "myproject",
"private": true,
"version": "0.0.0",
"main": "electron/main.js",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"start:electron": "concurrently \"vite\" \"electron .\""
},
"dependencies": {
"vue": "^3.4.19"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"concurrently": "^8.2.2",
"electron": "^29.1.1",
"electron-builder": "^24.13.3",
"typescript": "^5.2.2",
"vite": "^5.1.4",
"vue-tsc": "^1.8.27"
}
}效果图
到此这篇关于如何使用yarn创建vite+vue3&&electron多端运行的文章就介绍到这了,更多相关yarn创建vite vue3内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！