create-vue搭建項目
官網(wǎng)：https://staging-cn.vuejs.org/guide/quick-start.html#with-build-tools
create-vue 是 Vue3 的專用腳手架焊夸，使用 vite 創(chuàng)建 Vue3 的項目橙数，也可以選擇安裝需要的各種插件，使用更簡單。
使用方法：
npm init vue@latest可選插件：
? Project name: … <your-project-name>
// TypeScript的支持
? Add TypeScript? … No / Yes
// JSX的支持
? Add JSX Support? … No / Yes
// 支持路由
? Add Vue Router for Single Page Application development? … No / Yes
// 狀態(tài)管理
? Add Pinia for state management? … No / Yes
// Vitest測試框架
? Add Vitest for Unit testing? … No / Yes
// Cypress E2E測試工具
? Add Cypress for both Unit and End-to-End testing? … No / Yes
// ESLint代碼格式化規(guī)范檢查
? Add ESLint for code quality? … No / Yes
// Prettier代碼格式化
? Add Prettier for code formatting? … No / Yes
- 啟動項目：
> cd <your-project-name>
> npm install
> npm run dev
注意：運行報錯媳维，npm和node都要是最新版本
- 當準備將應(yīng)用發(fā)布到生產(chǎn)環(huán)境時，運行：
> npm run build
至此vue3搭建完成盗扒，下面開始集成electron
這里我的vue3+vite項目已經(jīng)有了辆它，在這基礎(chǔ)上使用electron轉(zhuǎn)換成桌面應(yīng)用。
1.獲取electron配置文件
首先可以執(zhí)行以下命令获茬，從electron的官網(wǎng)下載案例港庄，下載會比較慢，可以直接訪問git倉庫恕曲，下載代碼鹏氧。
git clone https://github.com/electron/electron-quick-start
下載以后主要是要用到代碼里的main.js和preload.js兩個文件。如果不下載佩谣，直接復制下面的兩個文件代碼即可把还。
main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
preload.js
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
把以上兩個文件放到自己的vue項目文件目錄下
在根目錄下新建了一個electron文件夾，里面放兩個js文件
2茸俭、項目配置
安裝依賴
electron不多說吊履。concurrently和 wait-on解釋一下。
開發(fā)環(huán)境的運行條件是调鬓，先運行vite啟動服務(wù)艇炎，然后electron去加載本地服務(wù)url。這里需要安裝兩個依賴袖迎。
concurrently：阻塞運行多個命令冕臭，-k參數(shù)用來清除其它已經(jīng)存在或者掛掉的進程
-wait-on：等待資源，此處用來等待url可訪問
npm install electron --save-dev
npm install concurrently wait-on --save-dev
electron/main.js
根據(jù)需求燕锥，我添加了Menu.setApplicationMenu(null)隱藏菜單欄辜贵，frame是否展示頂部導航的配置，默認為true归形。mainWindow.loadFile(‘index.html’)修改成了mainWindow.loadURL（關(guān)鍵）托慨，具體配置如下。
// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
//這里的配置手動寫的暇榴，也可以使用cross-env插件配置
const mode = 'development'
/*隱藏electron創(chuàng)聽的菜單欄*/
Menu.setApplicationMenu(null)
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame: true /*是否展示頂部導航 去掉關(guān)閉按鈕 最大化最小化按鈕*/ ,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
},
})
// and load the index.html of the app.
// mainWindow.loadFile('index.html') 修改成如下
mainWindow.loadURL(mode === 'development' ? 'http://localhost:2103' : `file://${path.join(__dirname, '../dist/index.html')}`)
// Open the DevTools.
if (mode === 'development') {
mainWindow.webContents.openDevTools()
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function() {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function() {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
3.vite.config.js
配置base: ‘./’
4.package.json
main：main.js修改成main：electron/main.js厚棵。添加electron和electron:serve指令
"main": "electron/main.js",
"scripts": {
"dev": "vite --host",
"serve": "vite preview",
"build": "vite build",
"electron": "wait-on tcp:2103 && electron . --mode=development ",
"electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\""
},
運行項目
npm run electron:serve
1.如果運行不成功或者成功之后白屏蕉世，可查看以下幾個關(guān)鍵配置
端口一致
electron熱更新
electron可以使用electron-reloader這個依賴實現(xiàn)項目熱更新：更改html/js/css代碼框架自動更新，大大提高開發(fā)效率婆硬，不用每次都npm start重新啟動狠轻。
1.安裝electron-reloader依賴
npm install --save-dev electron-reloader
2.程序入口文件（一般是index.js）中加入以下代碼
// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
//這里的配置手動寫的，也可以使用cross-env插件配置
const mode = 'development'
/*隱藏electron創(chuàng)聽的菜單欄*/
// Menu.setApplicationMenu(null)
//熱加載 以下為增加部分
try {
require('electron-reloader')(module,{});
} catch (_) {}
function createWindow() {
重啟一下項目就可以了彬犯。
3向楼、打包生成桌面應(yīng)用
1.安裝打包插件 electron-builder
npm install electron-builder --save-dev
2.package.json添加electron:build命令，和build配置
"main": "electron/main.js",
"scripts": {
"dev": "vite --host",
"serve": "vite preview",
"build": "vite build",
"electron": "wait-on tcp:2103 && electron . --mode=development ",
"electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
"electron:build": "npm run build && electron-builder"
},
"build": {
"appId": "8a06282fb08c48eeacb15bfbe4d3a35b",
"productName": "ElectronApp",
"copyright": "Copyright ? 2022 <項目名稱>",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
}
注意electron/main.js里的配置
執(zhí)行打包命令
npm run electron:build
出現(xiàn)報錯Error: Cannot find module ‘fs/promises’
搜索了下是node版本太低
成功后當前項目下出現(xiàn)dist_electron文件夾谐区，即為桌面應(yīng)用安裝包湖蜕。
提示：多次打包如果報錯，可刪除dist_electron文件夾宋列，再進行打包昭抒。
引用地址
