小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
初始化项目
需要注意：不能使用history模式，初始化页面会白屏
vue create project-name
添加依赖
依赖下载非常慢的话可以设置淘宝镜像源
npm install -g cnpm --registry=registry.npm.taobao.orghttps://
再下载依赖，推荐使用yarn
yarn add -D electron electron-builder vue-cli-plugin-electron-builder
vue add electron-builder
Package.json
执行完第二步,Package.json多出以下五条命令
//script内增加
"electron:build": "vue-cli-service electron:build",
"electron:serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
//根节点的增加配置
"main": "background.js",
"main": "background.js", 即Electron的入口文件,包含应用生命周期及其他配置
import { app, protocol, BrowserWindow } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: "app", privileges: { secure: true, standard: true } },
]);
async function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
},
});
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
if (!process.env.IS_TEST) win.webContents.openDevTools();
} else {
createProtocol("app");
// Load the index.html when not in development
win.loadURL("app://./index.html");
}
}
// Quit when all windows are closed.
// 关闭所有窗口,杀死进程，MacOs除外
app.on("window-all-closed", () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
// 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();
});
// 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.on("ready", async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS);
} catch (e) {
console.error("Vue Devtools failed to install:", e.toString());
}
}
createWindow();
});
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === "win32") {
process.on("message", (data) => {
if (data === "graceful-exit") {
app.quit();
}
});
} else {
process.on("SIGTERM", () => {
app.quit();
});
}
}
启动项目
yarn electron:serve
或者
npm run electron:serve
项目目录
vue-electron
├─ dist_electron
│ ├─ index.js
│ └─ package.json
├─ public
│ ├─ favicon.ico
│ └─ index.html
├─ src
│ ├─ assets
│ │ └─ logo.png
│ ├─ components
│ │ └─ HelloWorld.vue
│ ├─ router
│ │ └─ index.js
│ ├─ store
│ │ └─ index.js
│ ├─ views
│ │ ├─ About.vue
│ │ └─ Home.vue
│ ├─ App.vue
│ ├─ background.js
│ └─ main.js
├─ babel.config.js
├─ package.json
├─ README.md
└─ yarn.lock
安装调试工具-VueDevtools
在线安装
刚才初始化的项目是在在线安装的形式，由于需要翻墙，故需要Vpn，这里不坐演示
下载安装好，开启，重新运行项目即可
离线安装
网络上大篇幅的安装教程已过时，原因是Electron的语法有更新,相关新语法指路：
www.electronjs.org/docs/api/se…
去插件网站下载调试工具插件或者直接在扩展商店里安装(可借助谷歌访问助手)
vue-devtools下载地址：www.extfans.com/web-develop…
下载后，安装在chrome浏览器里，百度安装办法即可，安装后，需要找到插件的目录，如下图
在background.js文件里加入如下代码即可
注意session.defaultSession.loadExtension(path)中的path必须精确到上图所示目录
//比较完整的这部分配置
import { app, protocol, BrowserWindow, Menu, globalShortcut, session } from 'electron'
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
await session.defaultSession.loadExtension('C:/Users/siyue/AppData/Local/Microsoft/Edge/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/5.3.4_0')
}
})
//核心配置
import {app, session } from 'electron'
app.on('ready', async () => {
await session.defaultSession.loadExtension('C:/Users/siyue/AppData/Local/Microsoft/Edge/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/5.3.4_0')
})
