Electron+Vue – 基礎學習(1): 建立項目

Electron 和 Vue 都是幹啥的，就不作過多介紹了，能夠去官網瞅瞅。下面總結 Electron+Vue 建立項目，Electron + Vue 建立項目實際上至關於：建立Vue項目 + Electron封裝。

1、建立Vue項目 + Electron封裝

　　一、建立Vue項目

　　　　經過 Vue腳手架工具 vue-cli 建立Vue項目：vue init webpack xxxxxx　　（注：項目名稱中不能出現大寫字母）

　　   vue init webpack electron-vue

　　　　　　等待Vue項目初始化完成。

　　　　　　Vue項目建立完成，經過CMD命令行進入項目存放目錄或代碼編輯工具(vscode、webstorm)等直接打開該項目，執行命令：npm run dev    啓動項目。

　　　　npm run dev

　　　　　　項目啓動成功。

　　　　執行命令：npm run build 打包項目，項目打包完成之後會在項目文件夾內自動新建一個 dist文件夾。到這一步爲止，Vue這邊的操做已經完成，下面進入 dist文件夾開始 Electron 封裝。

　　　　npm run build

　　2、進入dist文件夾，進行Electron 封裝

　　　　一、在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 }

　　　　二、本地安裝electron，而後安裝項目依賴包。

　　　　npm install --save-dev electron 或 cnpm install --save-dev electron

　　　　npm install 或 cnpm install

　　　　三、執行啓動命令：npm start，就能夠啓動Electron + Vue項目了。

　　　　npm start

　　　　

2、electron-forge 建立項目

　　一、執行命令：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項目時省略了。

　　等待項目建立完畢，進入項目存放目錄，執行命令：npm start 或 electron-forge start，啓動項目，以下圖所示：

npm start 或 electron-forge start

　　　　 

 

結語：兩種建立項目的方式各有千秋，第一種方式優點在於建立過程一步步清晰明瞭，便於理解每一個過程的用處，劣勢則是過程繁瑣，坑不少；第二種優劣勢則剛好跟第一種相反。建議先經過第一種方式建立完項目後，再經過第二種方式建立工程項目，便於之後項目打包和上線(第一種方式之後打包，忒費勁了)。