Electron 和 Vue 都是干啥的，就不做過多介紹了，可以去官網瞅瞅，下面總結 Electron+Vue 創建專案，Electron + Vue 創建專案實際上相當于：創建Vue專案 + Electron封裝，
一、創建Vue專案 + Electron封裝
1、創建Vue專案
(1)、通過 Vue腳手架工具 vue-cli 創建Vue專案：vue init webpack xxxxxx （注：專案名稱中不能出現大寫字母）
vue init webpack electron-vue
等待Vue專案初始化完成，
Vue專案創建完成，通過CMD命令列進入專案存放目錄 或 代碼編輯工具(vscode、webstorm)等直接打開該專案，執行命令：npm run dev 啟動專案，
npm run dev
專案啟動成功，
(2)、執行命令：npm run build 打包專案，專案打包完成以后會在專案檔案夾內自動新建一個 dist檔案夾，到這一步為止，Vue這邊的操作已經完成，下面進入 dist檔案夾開始 Electron 封裝，
npm run build
二、進入dist檔案夾，進行Electron 封裝
1、在dist檔案夾內 創建主程式入口(main.js) 和 組態檔package.json
main.js
const {app, BrowserWindow} = require('electron'); //引入electron
let win;
let windowConfig = { //視窗配置程式運行視窗的大小
width: 800,
height: 600
};
function createWindow() {
win = new BrowserWindow(windowConfig); //創建一個視窗
win.loadURL(`file://${__dirname}/index.html`); //在視窗內要展示的內容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //開啟除錯工具
win.on('close', () => { //回收BrowserWindow物件
win = null;
});
win.on('resize', () => {
win.reload();
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
app.quit();
});
app.on('activate', () => {
if (win == null) {
createWindow();
}
});
package.json
{ "name": "electron-vue", "version": "1.0.0", "description": "electron-vue", "main": "main.js", "scripts": { "start": "electron .", "package": "electron-packager . electron-vue --win --out electron-vue --arch=x64 --electron-version=7.1.9" }, "author": "", "private": true }
2、本地安裝electron，然后安裝專案依賴包，
npm install --save-dev electron 或 cnpm install --save-dev electron
npm install 或 cnpm install
3、執行啟動命令：npm start，就可以啟動Electron + Vue專案了，
npm start
二、通過 electron-forge 創建專案
1、執行命令：electron-forge init xxxxxx --template=vue (注：模板也可以使用 Electron版Vue：vue-electron，但vue-electron版本比較老，很多更新都沒有，所以不建議使用)
electron-forge init vue-project --template=vue
electron-forge 創建 Vue專案和 創建 electron專案差不多，區別在于：專案名稱后面跟了一個模板引數 template，這個引數其實一直都有，只是之前創建 electron專案時省略了，
2、等待專案創建完畢，進入專案存放目錄，執行命令：npm start 或 electron-forge start，啟動專案，如下圖所示：
npm start 或 electron-forge start
結語：兩種創建專案的方式各有千秋，第一種方式優勢在于創建程序一步步清晰明了，便于理解每個程序的用處，劣勢則是程序繁瑣，坑很多；第二種優劣勢則恰好跟第一種相反，建議先通過第一種方式創建完專案后，再通過第二種方式創建工程專案，便于以后專案打包和上線(第一種方式以后打包，忒費勁了)，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/14742.html
標籤：HTML5