基于electron+vue+element构建项目模板之【自定义标题栏&右键菜单项篇】
1、概述
开发平台OS：windows
开发平台IDE：vs code
本篇章将介绍自定义标题栏和右键菜单项，基于electron现有版本安全性的建议，此次的改造中主进程和渲染进程彼此语境隔离，通过预加载(preload.js)和进程间通信(ipc)的方式来完成。
2、窗口最大化
一些应用在实际情况中，希望启动的时候就以窗口最大化的方式呈现，BrowserWindow对象提供了窗口最大化的方法：win.maximize()，具体如下所示：
const win = new BrowserWindow({ //窗体宽度(像素)，默认800像素 width: 800, //窗体高度(像素)，默认600像素 height: 600, //窗口标题，如果在加载的 HTML 文件中定义了 HTML 标签 ``，则该属性将被忽略。</span> <span style="color: rgba(0, 0, 0, 1)"> title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`, webPreferences: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Use pluginOptions.nodeIntegration, leave this alone</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span> <span style="color: rgba(0, 0, 0, 1)"> nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, contextIsolation: </span>!<span style="color: rgba(0, 0, 0, 1)">process.env.ELECTRON_NODE_INTEGRATION, }, }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体最大化</span> win.maximize();</pre> <span class="1024sou_code_collapse">点击查看代码</span> <p>通过设置后，启动应用就会发现，最大化的过程中会出现黑底闪屏，这样会给用户造成困扰。</p> <p style="margin: 0"></p> <p style="margin: 0"> </p> <p style="margin: 0">造成这个现象的原因是实例化窗体的时候，默认显示了窗口，然后再最大化，从默认窗口大小到最大化窗口大小的这个过程中窗体还没绘制好，就会出现黑色背景直至最大化完成后，现在稍加改造就可以解决这个问题：<span style="color: rgba(255, 153, 204, 1)">实例化的时候不显示窗体，最大化后再显示窗体。</span></p> <pre> const win = <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> BrowserWindow({ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体宽度(像素)，默认800像素</span> width: 800<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体高度(像素)，默认600像素</span> height: 600<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口标题，如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`，则该属性将被忽略。</span> <span style="color: rgba(0, 0, 0, 1)"> title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不显示窗体</span> show: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, webPreferences: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Use pluginOptions.nodeIntegration, leave this alone</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span> <span style="color: rgba(0, 0, 0, 1)"> nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, contextIsolation: </span>!<span style="color: rgba(0, 0, 0, 1)">process.env.ELECTRON_NODE_INTEGRATION, }, }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体最大化</span> <span style="color: rgba(0, 0, 0, 1)"> win.maximize(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">显示窗体</span> win.show();</pre> <span class="1024sou_code_collapse">点击查看代码</span> <p><strong><span style="font-family: "Microsoft YaHei"; font-size: 18px">3、自定义标题栏</span></strong></p> <p style="margin: 0"><span style="font-family: "Microsoft YaHei"; font-size: 15px">为什么要自定义标题栏？electron应用自带的标题栏不能满足日益复杂的功能需求时，就只能自定义了。自定义标题除了实现基本的窗口功能外，它还能方便的快速的扩展其他功能需求。</span></p> <p><span style="font-family: "Microsoft YaHei"; font-size: 15px">自定义标题栏使用的是css3-flex+scss 来实现布局和样式的编写，其主体划分为两个区域：标题栏区域和功能区域，如下图所示：</span></p> <p></p> <p>为了使用scss语言来编写样式，我们需要安装 <span style="color: rgba(115, 178, 236, 1)">sass-loader</span> 插件，在终端输入命令：<span style="color: rgba(115, 178, 236, 1)">npm install sass-loader@^10 sass --save-dev<span style="color: rgba(0, 0, 0, 1)"> <span style="color: rgba(255, 153, 204, 1)">指定版本尤为重要，高版本对于webpack版本也有要求</span></span></span></p> <p><span style="font-family: "Microsoft YaHei"; font-size: 16px"><strong><span style="color: rgba(115, 178, 236, 1)"><span style="color: rgba(0, 0, 0, 1)">3.1、iconfront 图标添加</span></span></strong></span></p> <p><span style="color: rgba(115, 178, 236, 1)"><span style="color: rgba(0, 0, 0, 1)">功能区域处的功能按钮需要图标，此块是在 <span style="color: rgba(138, 206, 246, 1)">iconfront</span> 官网上找了合适的图标加入购物车后以下载代码的方式下载资源，然后通过下载的demo中第二种方式集成在项目中。</span></span></p> <p><span style="font-family: "Microsoft YaHei"; font-size: 16px"><strong><span style="color: rgba(115, 178, 236, 1)"><span style="color: rgba(0, 0, 0, 1)">3.2、编写标题栏页面</span></span></strong></span></p> <p><span style="color: rgba(115, 178, 236, 1)"><span style="color: rgba(0, 0, 0, 1)">在src/renderer/App.vue 修改其内容以完成标题栏的改造，主要是通过css3-flex来完成的布局，包含了标题栏原有的基本功能，改造后效果(gif有失真效果)以及改造的代码如下所示：</span></span></p> <pre><template> <div id="app"> <header> <div class="titleArea"> <img :src="winIcon" /> <span>{{ winTitle }}</span> </div> <div class="featureArea"> <div title="扩展"> <span class="iconfont icon-xiakuozhanjiantou"></span> </div> <div title="最小化"> <span class="iconfont icon-minimum"></span> </div> <div :title="maximizeTitle"> <<span style="color: rgba(0, 0, 0, 1)">span :class</span>="<span style="color: rgba(0, 0, 0, 1)">{ iconfont: true, 'icon-zuidahua': isMaximized, 'icon-window-max_line': !isMaximized, }</span>" ></span> </div> <div title="关闭"> <span class="iconfont icon-guanbi"></span> </div> </div> </header> <main>我是主体</main> </div> </template> <script><span style="color: rgba(0, 0, 0, 1)"> export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> { data: () </span>=><span style="color: rgba(0, 0, 0, 1)"> ({ winIcon: `${process.env.BASE_URL}favicon.ico`, winTitle: process.env.VUE_APP_NAME, isMaximized: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, }), computed: { maximizeTitle() { </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.isMaximized ? "向下还原" : "最大化"<span style="color: rgba(0, 0, 0, 1)">; }, }, }; </span></script> <style lang="scss"><span style="color: rgba(0, 0, 0, 1)"> $titleHeight: 40px; body { margin: 0px; } #app { font</span>-family: "微软雅黑"<span style="color: rgba(0, 0, 0, 1)">; color: #2c3e50; display: flex; flex</span>-<span style="color: rgba(0, 0, 0, 1)">direction: column; header { background: #16407b; color: #8c8663; height: $titleHeight; width: </span>100%<span style="color: rgba(0, 0, 0, 1)">; display: flex; .titleArea { flex</span>-grow: 10<span style="color: rgba(0, 0, 0, 1)">; padding</span>-<span style="color: rgba(0, 0, 0, 1)">left: 5px; display: flex; align</span>-<span style="color: rgba(0, 0, 0, 1)">items: center; img { width: 24px; height: 24px; } span { padding</span>-<span style="color: rgba(0, 0, 0, 1)">left: 5px; } } .featureArea { flex</span>-grow: 1<span style="color: rgba(0, 0, 0, 1)">; display: flex; justify</span>-content: flex-<span style="color: rgba(0, 0, 0, 1)">end; div { width: 30px; height: 30px; line</span>-<span style="color: rgba(0, 0, 0, 1)">height: 30px; text</span>-<span style="color: rgba(0, 0, 0, 1)">align: center; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 最小化 最大化悬浮效果 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> div:hover { background: #6fa8ff; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 关闭悬浮效果 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> div:last</span>-<span style="color: rgba(0, 0, 0, 1)">child:hover { background: red; } } } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 主体区域铺满剩余的整个宽、高度</span> <span style="color: rgba(0, 0, 0, 1)"> main { background: #e8eaed; width: </span>100%<span style="color: rgba(0, 0, 0, 1)">; height: calc(100vh </span>-<span style="color: rgba(0, 0, 0, 1)"> $titleHeight); } } </span></style></pre> <span class="1024sou_code_collapse">点击查看代码</span> <p style="margin: 0"></p> <p><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px"> 3.3、标题栏页面添加交互</span></strong></p> <p><span style="font-family: "Microsoft YaHei"; font-size: 15px">从electron机制上来说，BrowserWindow是属于主进程模块，要想实现在页面中(渲染进程)调用主进程窗口的功能，这涉及到渲染进程与主进程的通信和安全性，在这通过预加载(preload.js)和 ipc 来实现该需求。</span></p> <ol> <li><span style="color: rgba(58, 195, 243, 1)">src/main</span> 目录下添加 <span style="color: rgba(58, 195, 243, 1)">preload.js</span> 文件，具体内容如下所示： <pre>import { contextBridge, ipcRenderer } from "electron"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体操作api</span> contextBridge.exposeInMainWorld("windowApi"<span style="color: rgba(0, 0, 0, 1)">, { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">最小化</span> minimize: () =><span style="color: rgba(0, 0, 0, 1)"> { ipcRenderer.send(</span>"window-min"<span style="color: rgba(0, 0, 0, 1)">); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">向下还原|最大化</span> maximize: () =><span style="color: rgba(0, 0, 0, 1)"> { ipcRenderer.send(</span>"window-max"<span style="color: rgba(0, 0, 0, 1)">); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">关闭</span> close: () =><span style="color: rgba(0, 0, 0, 1)"> { ipcRenderer.send(</span>"window-close"<span style="color: rgba(0, 0, 0, 1)">); }, </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">* * 窗口重置大小 * @param {重置大小后的回调函数} callback </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> resize: (callback) </span>=><span style="color: rgba(0, 0, 0, 1)"> { ipcRenderer.on(</span>"window-resize"<span style="color: rgba(0, 0, 0, 1)">, callback); }, });</span></pre> <span class="1024sou_code_collapse">点击查看代码</span> </li> <li><span style="color: rgba(58, 195, 243, 1)">src/main/index.js</span> 添加窗体最大化、最小化、关闭、重置大小监听、预先加载指定脚本等功能，具体内容如下所示： <pre>"use strict"<span style="color: rgba(0, 0, 0, 1)">; import { app, protocol, BrowserWindow, ipcMain } from </span>"electron"<span style="color: rgba(0, 0, 0, 1)">; import { createProtocol } from </span>"vue-cli-plugin-electron-builder/lib"<span style="color: rgba(0, 0, 0, 1)">; import path from </span>"path"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 取消安装devtools后，则不需要用到此对象，可以注释掉</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";</span> const isDevelopment = process.env.NODE_ENV !== "production"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Scheme must be registered before the app is ready</span> <span style="color: rgba(0, 0, 0, 1)">protocol.registerSchemesAsPrivileged([ { scheme: </span>"app", privileges: { secure: <span style="color: rgba(0, 0, 255, 1)">true</span>, standard: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> } }, ]); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建应用主窗口</span> const createWindow = async () =><span style="color: rgba(0, 0, 0, 1)"> { const win </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> BrowserWindow({ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体宽度(像素)，默认800像素</span> width: 800<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体高度(像素)，默认600像素</span> height: 600<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口标题，如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`，则该属性将被忽略。</span> <span style="color: rgba(0, 0, 0, 1)"> title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不显示窗体</span> show: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, webPreferences: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Use pluginOptions.nodeIntegration, leave this alone</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 是否开启node集成，默认false</span> nodeIntegration: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true</span> contextIsolation: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在页面运行其他脚本之前预先加载指定的脚本</span> preload: path.join(__dirname, "preload.js"<span style="color: rgba(0, 0, 0, 1)">), }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">fasle:无框窗体(没有标题栏、菜单栏)</span> frame: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体最大化</span> <span style="color: rgba(0, 0, 0, 1)"> win.maximize(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">显示窗体</span> <span style="color: rgba(0, 0, 0, 1)"> win.show(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (process.env.WEBPACK_DEV_SERVER_URL) { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Load the url of the dev server if in development mode</span> <span style="color: rgba(0, 0, 0, 1)"> await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL); </span><span style="color: rgba(0, 0, 255, 1)">if</span> (!<span style="color: rgba(0, 0, 0, 1)">process.env.IS_TEST) win.webContents.openDevTools(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { createProtocol(</span>"app"<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Load the index.html when not in development</span> await win.loadURL("app://./index.html"<span style="color: rgba(0, 0, 0, 1)">); } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">监听窗口重置大小后事件，若触发则给渲染进程发送消息</span> win.on("resize", () =><span style="color: rgba(0, 0, 0, 1)"> { win.webContents.send(</span>"window-resize"<span style="color: rgba(0, 0, 0, 1)">, win.isMaximized()); }); }; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Quit when all windows are closed.</span> app.on("window-all-closed", () =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> On macOS it is common for applications and their menu bar</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> to stay active until the user quits explicitly with Cmd + Q</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (process.platform !== "darwin"<span style="color: rgba(0, 0, 0, 1)">) { app.quit(); } }); app.on(</span>"activate", () =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> On macOS it's common to re-create a window in the app when the</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> dock icon is clicked and there are no other windows open.</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (BrowserWindow.getAllWindows().length === 0<span style="color: rgba(0, 0, 0, 1)">) createWindow(); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 只有在 app 模组的 ready 事件能触发后才能创建 BrowserWindows 实例。 您可以借助 app.whenReady() API 来等待此事件</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> 通常我们使用触发器的 .on 函数来监听 Node.js 事件。</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> 但是 Electron 暴露了 app.whenReady() 方法，作为其 ready 事件的专用监听器，这样可以避免直接监听 .on 事件带来的一些问题。 参见 https://github.com/electron/electron/pull/21972。</span> app.whenReady().then(() =><span style="color: rgba(0, 0, 0, 1)"> { createWindow(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口最小化</span> ipcMain.on("window-min", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); win.minimize(); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口向下还原|最大化</span> ipcMain.on("window-max", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); const isMaximized </span>=<span style="color: rgba(0, 0, 0, 1)"> win.isMaximized(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isMaximized) { win.unmaximize(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { win.maximize(); } }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口关闭</span> ipcMain.on("window-close", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); win.destroy(); }); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 注释了此种方式改用官方推荐的专用方法来实现事件的监听</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> app.on("ready", async () => {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> //启动慢的原因在此，注释掉它后能换来极致的快感</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // if (isDevelopment && !process.env.IS_TEST) {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // // Install Vue Devtools</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // try {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // await installExtension(VUEJS_DEVTOOLS);</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // } catch (e) {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // console.error("Vue Devtools failed to install:", e.toString());</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // }</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // }</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> createWindow();</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> });</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Exit cleanly on request from parent process in development mode.</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isDevelopment) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (process.platform === "win32"<span style="color: rgba(0, 0, 0, 1)">) { process.on(</span>"message", (data) =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (data === "graceful-exit"<span style="color: rgba(0, 0, 0, 1)">) { app.quit(); } }); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { process.on(</span>"SIGTERM", () =><span style="color: rgba(0, 0, 0, 1)"> { app.quit(); }); } }</span></pre> <span class="1024sou_code_collapse">点击查看代码</span> </li> <li><span>完成上述两个步骤后启用应用，控制面板中提示有错误消息，如下图所示：</span> <p style="margin: 0"> 解决办法：根目录下<span style="color: rgba(58, 195, 243, 1)">vue.config.js</span> 文件 <span style="color: rgba(58, 195, 243, 1)">pluginOptions.electronBuilder</span> 节点添加内容 <span style="color: rgba(58, 195, 243, 1)">preload: "src/main/preload.js"</span>，具体内容如下所示：</p> <pre><span style="color: rgba(0, 0, 0, 1)"> pluginOptions: { electronBuilder: { mainProcessFile: </span>"src/main/index.js", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 主进程入口文件</span> mainProcessWatch: ["src/main"], <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 检测主进程文件在更改时将重新编译主进程并重新启动</span> preload: "src/main/preload.js", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 预加载js</span> <span style="color: rgba(0, 0, 0, 1)"> }, },</span></pre> <span class="1024sou_code_collapse">点击查看代码</span> </li> <li> <span style="color: rgba(58, 195, 243, 1)">src/renderer/App.vue</span> <span>在功能区域为功能按钮绑定点击事件及处理，具体内容如下所示：</span> <pre><template> <div id="app"> <header> <div class="titleArea"> <img :src="winIcon" /> <span>{{ winTitle }}</span> </div> <div class="featureArea"> <div title="扩展" @click="expand"> <span class="iconfont icon-xiakuozhanjiantou"></span> </div> <div title="最小化" @click="minimize"> <span class="iconfont icon-minimum"></span> </div> <div :title="maximizeTitle" @click="maximize"> <<span style="color: rgba(0, 0, 0, 1)">span :class</span>="<span style="color: rgba(0, 0, 0, 1)">{ iconfont: true, 'icon-zuidahua': isMaximized, 'icon-window-max_line': !isMaximized, }</span>" ></span> </div> <div title="关闭" @click="close"> <span class="iconfont icon-guanbi"></span> </div> </div> </header> <main>我是主体</main> </div> </template> <script><span style="color: rgba(0, 0, 0, 1)"> export </span><span style="color: rgba(0, 0, 255, 1)">default</span><span style="color: rgba(0, 0, 0, 1)"> { data: () </span>=><span style="color: rgba(0, 0, 0, 1)"> ({ winIcon: `${process.env.BASE_URL}favicon.ico`, winTitle: process.env.VUE_APP_NAME, isMaximized: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, }), mounted() { window.windowApi.resize(</span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.resize); }, computed: { maximizeTitle() { </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span>.isMaximized ? "向下还原" : "最大化"<span style="color: rgba(0, 0, 0, 1)">; }, }, methods: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">扩展</span> <span style="color: rgba(0, 0, 0, 1)"> expand() { </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.$message({ type: </span>"success"<span style="color: rgba(0, 0, 0, 1)">, message: </span>"我点击了扩展"<span style="color: rgba(0, 0, 0, 1)">, }); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">最小化</span> <span style="color: rgba(0, 0, 0, 1)"> minimize() { window.windowApi.minimize(); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">向下还原|最大化</span> <span style="color: rgba(0, 0, 0, 1)"> maximize() { window.windowApi.maximize(); }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 窗口关闭</span> <span style="color: rgba(0, 0, 0, 1)"> close() { window.windowApi.close(); }, </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">* * 重置窗体大小后的回调函数 * @param {事件源对象} event * @param {参数} args </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> resize(event, args) { </span><span style="color: rgba(0, 0, 255, 1)">this</span>.isMaximized =<span style="color: rgba(0, 0, 0, 1)"> args; }, }, }; </span></script> <style lang="scss"><span style="color: rgba(0, 0, 0, 1)"> $titleHeight: 40px; $iconSize: 35px; body { margin: 0px; } #app { font</span>-family: "微软雅黑"<span style="color: rgba(0, 0, 0, 1)">; color: #2c3e50; display: flex; flex</span>-<span style="color: rgba(0, 0, 0, 1)">direction: column; header { background: #16407b; color: #8c8663; height: $titleHeight; width: </span>100%<span style="color: rgba(0, 0, 0, 1)">; display: flex; .titleArea { flex</span>-grow: 10<span style="color: rgba(0, 0, 0, 1)">; padding</span>-<span style="color: rgba(0, 0, 0, 1)">left: 5px; display: flex; align</span>-<span style="color: rgba(0, 0, 0, 1)">items: center; img { width: 24px; height: 24px; } span { padding</span>-<span style="color: rgba(0, 0, 0, 1)">left: 5px; } } .featureArea { flex</span>-grow: 1<span style="color: rgba(0, 0, 0, 1)">; display: flex; justify</span>-content: flex-<span style="color: rgba(0, 0, 0, 1)">end; color: white; div { width: $iconSize; height: $iconSize; line</span>-<span style="color: rgba(0, 0, 0, 1)">height: $iconSize; text</span>-<span style="color: rgba(0, 0, 0, 1)">align: center; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 最小化 最大化悬浮效果 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> div:hover { background: #6fa8ff; } </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> 关闭悬浮效果 </span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)"> div:last</span>-<span style="color: rgba(0, 0, 0, 1)">child:hover { background: red; } } } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 主体区域铺满剩余的整个宽、高度</span> <span style="color: rgba(0, 0, 0, 1)"> main { background: #e8eaed; width: </span>100%<span style="color: rgba(0, 0, 0, 1)">; height: calc(100vh </span>-<span style="color: rgba(0, 0, 0, 1)"> $titleHeight); } } </span></style></pre> <span class="1024sou_code_collapse">点击查看代码</span> </li> <li><span>现在还差最后一步，在拖拽标题栏的时候，也需要能改变窗体位置和大小，具体内容如下所示：</span> </li> </ol> <p style="margin: 0"><span style="font-family: "Microsoft YaHei"; font-size: 16px"><strong><span style="color: rgba(255, 153, 204, 1)">标题栏最终的交互效果，如下图所示：</span></strong></span></p> <p style="margin: 0"></p> <p> <span style="font-family: "Microsoft YaHei"; font-size: 18px"><strong>4、自定义右键菜单项</strong></span></p> <p style="margin: 0"><span style="font-family: "Microsoft YaHei"; font-size: 15px">当前在开发模式下启动应用后也会自启动调试工具（devtools）便于技术人员分析并定位问题，如果关闭调试工具后就没有渠道再次启用调试工具了。还有场景就是在非开发模式下默认是不启用调试工具的，应用出现问题后也需要启用调试工具来分析定位问题。这个时候呢，参考浏览器鼠标右键功能，给应用添加右键菜单项功能包含有：重新加载、调试工具等。右键菜单项在主进程中 <span style="color: rgba(58, 195, 243, 1)">src/main/index.js</span> 管理，通过给 </span><span style="color: rgba(58, 195, 243, 1)">BrowserWindow</span> 对象 <span style="color: rgba(58, 195, 243, 1)">webContents</span> 属性绑定鼠标右键处理监听处理，具体内容如下所示：</p> <pre>"use strict"<span style="color: rgba(0, 0, 0, 1)">; import { app, protocol, BrowserWindow, ipcMain, Menu } from </span>"electron"<span style="color: rgba(0, 0, 0, 1)">; import { createProtocol } from </span>"vue-cli-plugin-electron-builder/lib"<span style="color: rgba(0, 0, 0, 1)">; import path from </span>"path"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 取消安装devtools后，则不需要用到此对象，可以注释掉</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";</span> const isDevelopment = process.env.NODE_ENV !== "production"<span style="color: rgba(0, 0, 0, 1)">; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Scheme must be registered before the app is ready</span> <span style="color: rgba(0, 0, 0, 1)">protocol.registerSchemesAsPrivileged([ { scheme: </span>"app", privileges: { secure: <span style="color: rgba(0, 0, 255, 1)">true</span>, standard: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)"> } }, ]); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">创建应用主窗口</span> const createWindow = async () =><span style="color: rgba(0, 0, 0, 1)"> { const win </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> BrowserWindow({ </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体宽度(像素)，默认800像素</span> width: 800<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体高度(像素)，默认600像素</span> height: 600<span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口标题，如果在加载的 HTML 文件中定义了 HTML 标签 `<title>`，则该属性将被忽略。</span> <span style="color: rgba(0, 0, 0, 1)"> title: `${process.env.VUE_APP_NAME}(${process.env.VUE_APP_VERSION})`, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不显示窗体</span> show: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, webPreferences: { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Use pluginOptions.nodeIntegration, leave this alone</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 是否开启node集成，默认false</span> nodeIntegration: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本. 默认为 true</span> contextIsolation: <span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在页面运行其他脚本之前预先加载指定的脚本</span> preload: path.join(__dirname, "preload.js"<span style="color: rgba(0, 0, 0, 1)">), }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">fasle:无框窗体(没有标题栏、菜单栏)</span> frame: <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗体最大化</span> <span style="color: rgba(0, 0, 0, 1)"> win.maximize(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">显示窗体</span> <span style="color: rgba(0, 0, 0, 1)"> win.show(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (process.env.WEBPACK_DEV_SERVER_URL) { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Load the url of the dev server if in development mode</span> <span style="color: rgba(0, 0, 0, 1)"> await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL); </span><span style="color: rgba(0, 0, 255, 1)">if</span> (!<span style="color: rgba(0, 0, 0, 1)">process.env.IS_TEST) win.webContents.openDevTools(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { createProtocol(</span>"app"<span style="color: rgba(0, 0, 0, 1)">); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Load the index.html when not in development</span> await win.loadURL("app://./index.html"<span style="color: rgba(0, 0, 0, 1)">); } </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">监听窗口重置大小后事件，若触发则给渲染进程发送消息</span> win.on("resize", () =><span style="color: rgba(0, 0, 0, 1)"> { win.webContents.send(</span>"window-resize"<span style="color: rgba(0, 0, 0, 1)">, win.isMaximized()); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">添加右键菜单项</span> <span style="color: rgba(0, 0, 0, 1)"> createContextMenu(win); }; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">给指定窗体创建右键菜单项</span> const createContextMenu = (win) =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">自定义右键菜单</span> const template =<span style="color: rgba(0, 0, 0, 1)"> [ { label: </span>"重新加载"<span style="color: rgba(0, 0, 0, 1)">, accelerator: </span>"ctrl+r", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">快捷键</span> click: <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () { win.reload(); }, }, { label: </span>"调试工具"<span style="color: rgba(0, 0, 0, 1)">, click: </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () { const isDevToolsOpened </span>=<span style="color: rgba(0, 0, 0, 1)"> win.webContents.isDevToolsOpened(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isDevToolsOpened) { win.webContents.closeDevTools(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { win.webContents.openDevTools(); } }, }, ]; const contextMenu </span>=<span style="color: rgba(0, 0, 0, 1)"> Menu.buildFromTemplate(template); win.webContents.on(</span>"context-menu", () =><span style="color: rgba(0, 0, 0, 1)"> { contextMenu.popup({ window: win }); }); }; </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Quit when all windows are closed.</span> app.on("window-all-closed", () =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> On macOS it is common for applications and their menu bar</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> to stay active until the user quits explicitly with Cmd + Q</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (process.platform !== "darwin"<span style="color: rgba(0, 0, 0, 1)">) { app.quit(); } }); app.on(</span>"activate", () =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> On macOS it's common to re-create a window in the app when the</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> dock icon is clicked and there are no other windows open.</span> <span style="color: rgba(0, 0, 255, 1)">if</span> (BrowserWindow.getAllWindows().length === 0<span style="color: rgba(0, 0, 0, 1)">) createWindow(); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 只有在 app 模组的 ready 事件能触发后才能创建 BrowserWindows 实例。 您可以借助 app.whenReady() API 来等待此事件</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> 通常我们使用触发器的 .on 函数来监听 Node.js 事件。</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> 但是 Electron 暴露了 app.whenReady() 方法，作为其 ready 事件的专用监听器，这样可以避免直接监听 .on 事件带来的一些问题。 参见 https://github.com/electron/electron/pull/21972。</span> app.whenReady().then(() =><span style="color: rgba(0, 0, 0, 1)"> { createWindow(); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口最小化</span> ipcMain.on("window-min", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); win.minimize(); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口向下还原|最大化</span> ipcMain.on("window-max", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); const isMaximized </span>=<span style="color: rgba(0, 0, 0, 1)"> win.isMaximized(); </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isMaximized) { win.unmaximize(); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { win.maximize(); } }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">窗口关闭</span> ipcMain.on("window-close", <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (event) { const win </span>=<span style="color: rgba(0, 0, 0, 1)"> BrowserWindow.fromId(event.sender.id); win.destroy(); }); }); </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 注释了此种方式改用官方推荐的专用方法来实现事件的监听</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> app.on("ready", async () => {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> //启动慢的原因在此，注释掉它后能换来极致的快感</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // if (isDevelopment && !process.env.IS_TEST) {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // // Install Vue Devtools</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // try {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // await installExtension(VUEJS_DEVTOOLS);</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // } catch (e) {</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // console.error("Vue Devtools failed to install:", e.toString());</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // }</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> // }</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> createWindow();</span><span style="color: rgba(0, 128, 0, 1)"> //</span><span style="color: rgba(0, 128, 0, 1)"> });</span> <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> Exit cleanly on request from parent process in development mode.</span> <span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (isDevelopment) { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (process.platform === "win32"<span style="color: rgba(0, 0, 0, 1)">) { process.on(</span>"message", (data) =><span style="color: rgba(0, 0, 0, 1)"> { </span><span style="color: rgba(0, 0, 255, 1)">if</span> (data === "graceful-exit"<span style="color: rgba(0, 0, 0, 1)">) { app.quit(); } }); } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> { process.on(</span>"SIGTERM", () =><span style="color: rgba(0, 0, 0, 1)"> { app.quit(); }); } }</span></pre> <span class="1024sou_code_collapse">点击查看代码</span> <p></p> <p>下一篇中将介绍项目打包等事宜</p> <p>感谢您阅读本文，如果本文给了您帮助或者启发，还请三连支持一下，点赞、关注、收藏，作者会持续与大家分享更多干货~</p> <p>源码地址：https://gitee.com/libaitianya/electron-vue-element-template</p> </div> <!--conend--> <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid2273-0.html' class='tagbtn' target='_blank'>electron</a><a href='/t/etagid2589-0.html' class='tagbtn' target='_blank'>elementui</a><a href='/t/etagid239-0.html' class='tagbtn' target='_blank'>vue</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div> <!--xg--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565979.html">创建vue项目的第一步——之安装vue 命令更新了</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565990.html">vue打包报错</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565272.html">vue登录页面后台返回验证码图片</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564897.html">vue axios 1 创建项目及简单配置axios</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564552.html">vue两层list循环后，内层循环页面选择类型</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564506.html">HMVue1.5【Source Map】</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563914.html">vue代理服务器proxy详情配置信息</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562341.html">[转]Vue-cli3.x引入本地json报404 解决方案</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562421.html">[转]Vue CLI 3搭建vue+vuex 最全分析</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561824.html">AntDesign vue学习笔记（三）嵌套路由使用</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561925.html">vue 多项目部署---二级目录</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div> <!----> <!----> </div> <!--xgend--> </div> <div class="col-lg-3 col-12 p-0 ps-lg-2"> <!--box--> <!--boxend--> <!--<div class="p-2"></div>--> <!--box--> <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div> <!--box end--> </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>