基礎框架搭建
基於@vue/cli初始化一個vue專案
安裝最新版本的VueCLI3
需要Node.js 8或更高版本
npm install -g @vue/cli
# OR
yarn global add @vue/cli
複製程式碼初始化專案
vue create Eblog
複製程式碼具體步驟可參考建立一個專案，這裡選擇手動選擇功能，並選中Babel、Router、Vuex、Css processors(scss)、Linter。
初始化完成後，進入EBlog目錄，執行yarn serve即可執行專案。
執行地址為http://127.0.0.1:8080/
專案配置
在根目錄增加vue.config.js檔案，新增baseUrl配置為""
vue.config.js
module.exports = {
baseUrl: ""
};
複製程式碼此配置的目的為使vue中的所有資源都使用相對路徑進行連結，以便electron載入檔案時能正確讀取檔案。
專案打包
yarn build
複製程式碼此時會在根目錄下生成打包後的dist目錄檔案
整合Electron
安裝electron
yarn add electron -D
複製程式碼在根目錄下建立electron目錄，新增main.js檔案：
const { app, BrowserWindow } = require("electron");
const path = require("path");
let mainWindow;
// 宣告視窗載入的地址，如果是開發環境載入vue開發環境地址，
// 正式環境載入vue專案打包後靜態檔案路徑
let winurl =
process.env.NODE_ENV === "development"
? "http://localhost:8080"
: path.join(__dirname, "../dist/index.html");
function createWindow() {
// 建立一個主視窗
mainWindow = new BrowserWindow({
width: 800,
height: 600
});
// 載入頁面檔案，或地址
mainWindow.loadURL(winurl);
// 開啟開發者工具
mainWindow.webContents.openDevTools();
// 監聽視窗關閉事件
mainWindow.on("closed", function() {
mainWindow = null;
});
}
//app 載入完成後建立視窗
app.on("ready", createWindow);
// 監聽所有視窗關閉事件.
app.on("window-all-closed", function() {
if (process.platform !== "darwin") {
app.quit();
}
});
// 監聽app啟用事件
app.on("activate", function() {
if (mainWindow === null) {
createWindow();
}
});
複製程式碼執行electron
在package.json檔案中增加script命令：
{
"start": "electron electron/main"
}
複製程式碼然後執行yarn start命令，即可開啟app視窗