如何使用Vue开发Electron桌面程序
目录
一、Electron介绍
二、项目搭建
1. 使用 vue cli 创建vue项目
2. 安装插件 vue-cli-plugin-electron-builder
编辑
三、开发总结
1. 配置项目图标
2. 在Mac系统下的几个问题
3. 项目开发模式运行出现 Failed to fetch extension 警告
4. 项目使用本地的vue devtools
一、Electron介绍
Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目. 使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序
1. 特点
跨平台 可以打包成Mac、Windows 和 Linux三个平台的应用程序
简化桌面端开发 (1)Electron 基于 Chromium 和 Node.js,可以使用 HTML, CSS 和 JavaScript 构建应用 (2)提供Electron api 和 NodeJS api
社区活跃
2. 兼容性
xp无缘了, 可能需要使用nwjs等方案
二、项目搭建
1. 使用 vue cli 创建vue项目
vue create electron-test
2. 安装插件 vue-cli-plugin-electron-builder
vue add electron-builder
这里我选择最新的版本^11.0.0
3. 安装完插件后, 项目中的一些变化
① package.json 新增了几个scripts
electron开发模式
npm run electron:serve
electron打包复制代码
npm run electron:build
postinstall 和 postuninstall 是为了确保安装或者移除依赖时, 始终跟electron匹配
② 新增了background.js文件
主进程相关操作, 写在这个文件中
三、开发总结
1. 配置项目图标
使用electron-icon-builder
, 生成符合Electron的图标
① 安装
npm install --save-dev electron-icon-builder
② package.json
中配置生成命令
"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"
③ 生成图标
npm run electron:generate-icons
④ 使用
import path from 'path'const win = new BrowserWindow({icon: path.join(__static, 'icon.png')
})
2. 在Mac系统下的几个问题
在mac系统下修改electron默认图标
在根目录下放置一张名为icon的图片,即icon.png即可。
在Mac系统下,复制粘贴无效的问题:
可以在创建窗口的时候自定义快捷键:
具体代码:
async function createWindow() {createMenu();// Create the browser window.win = new BrowserWindow({width: 1300,height: 660,minWidth: 1300,useContentSize: true,resizable: true,// frame: false,// backgroundColor: '#DC143C',// titleBarStyle: 'hidden',webPreferences: {webSecurity: false, //Remove cross domain restrictionsnodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,// eslint-disable-next-line no-undefpreload: `${__static}/preload.js`},//${__ Static} corresponds to the public directory// eslint-disable-next-line no-undeficon: `${__static}/img/icons/logo-64.png`// icon: `${__static}/img/icons/favicon.ico`});if (process.platform === 'darwin') {// eslint-disable-next-line no-undefapp.dock.setIcon(`${__static}/img/icons/logo-512.png`);}if (process.env.WEBPACK_DEV_SERVER_URL) {// Load the url of the dev server if in development modeawait 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 developmentwin.loadURL('app://./index.html');//Detect version updatesupdateHandle(win, feedUrl);}win.on('closed', () => {win = null;});globalShortcut.register('CommandOrControl+Shift+i', function () {win.webContents.openDevTools();});// esc,globalShortcut.register('ESC', function () {win.unmaximize();});if (process.platform === 'darwin') {const template = [{label: 'Application',submenu: [{label: 'Quit',accelerator: 'Command+Q',click: function () {app.quit();}}]},{label: 'Edit',submenu: [{ label: 'Copy', accelerator: 'CmdOrCtrl+C', selector: 'copy:' },{ label: 'Paste', accelerator: 'CmdOrCtrl+V', selector: 'paste:' }]}];Menu.setApplicationMenu(Menu.buildFromTemplate(template));}
}
因为只是在Mac系统下需要自定义快捷键,因此加了一个 if (process.platform === 'darwin') {}的判断,快捷键的官网查询:官网快捷键
3. 项目开发模式运行出现 Failed to fetch extension 警告
由于网络问题, 开发模式无法下载 vue devtool 导致的警告, 需要在 background.js 中注释掉下载代码
4. 项目使用本地的vue devtools
① 首先可以将vue devtools的代码clone下来, 然后进行编译
git clone https://github.com/vuejs/vue-devtools.gitcd vue-devtools npm install npm run build复制代码
然后把vue-devtools/packages/shell-chrome
文件夹复制到项目根目录
② 在background.js
文件的app.on('ready',
生命周期中进行加载
// 使用本地的vue开发者工具session.defaultSession.loadExtension(path.resolve('shell-chrome'))复制代码
③ 创建窗口的时候使用下面示例方法, 即可正常显示出vue开发者工具
// src/background.jsif (process.env.WEBPACK_DEV_SERVER_URL) { await transferWin.loadURL(process.env.WEBPACK_DEV_SERVER_URL + '/#/test') if (!process.env.IS_TEST) transferWin.webContents.openDevTools() } else {transferWin.loadURL('app://./index.html' + '/#/test') }复制代码
参考文章:如何用Vue开发Electron桌面程序? 「干货分享
如何使用Vue开发Electron桌面程序相关推荐
- electron 桌面程序_如何使用Electron使用JavaScript构建您的第一个桌面应用程序
electron 桌面程序 by Carol-Theodor Pelu 通过Carol-Theodor Pelu 如何使用Electron使用JavaScript构建您的第一个桌面应用程序 (How ...
- Vue开发微信小程序
一.安装Vue及Vue-cli脚手架 参考:Windows安装Vue 二.安装HBuilder X[方便快速上手] 1.下载 2.解压[无需安装] 3.点击执行[根据需要创建桌面快捷方式即可] 4.创 ...
- html+js开发windows桌面程序的方案(miniblink)
最近需要开发windows桌面程序,但由于界面复杂多变且项目周期较短,故放弃完全使用qt或mfc来开发,首先考虑了Electron,但发现其打包的程序实在太大超过了100M,偶然间发现某vpn软件使用 ...
- 使用Python开发windows桌面程序
使用Python开发windows桌面程序 一.开发前期准备 1. boa-constructor-0.6.1.bin.setup.exe #一个wxWidges的集成开发环境,简单如Delphi,可 ...
- 使用Vue开发微信小程序:mpvue框架
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
- python开发windows桌面程序,python开发windows桌面应用
为什么用Python开发桌面应用程序 1)wxWidgets是一个比MFC优雅的库,TortoiseCVS用wxWidges而不用MFC,就是因为wxWidgets好用,而不是为了可以移植. 2)Py ...
- java桌面版的怎么做_java - 怎么开发windows桌面程序?
PHP中文网2017-04-18 10:18:097楼 桌面上使用类似XML布局的,现在有过气的DirectUI(C++),Qt的Qt Quick(C++),微软的过气的WPF和新推出的UWP(C#) ...
- C语言开发windows桌面程序,开发 windows 桌面软件,现在主流用什么技术?
桌面软件还是得win32,工具只有两个选择vc和delphi,不建议用.net,存在部署问题. 还有大佬说 桌面还是老老实实C#吧,看需求选择WPF或者Winforms 或者干脆激进一点,直接上win ...
- 【用vue开发微信小程序】(uni-app)
文章目录 前言 一.大体流程 1.uni-app项目搭建流程: 2.团队开发流程 二.遇到的些问题 1.插件的使用 ①使用uni原生ui插件: ②使用SegmentedControl分段器 ③使用uV ...
最新文章
- 数据不够,是模型表现不佳的“借口”,还是真正的问题所在?
- 微软Azure Stack混合云进入中国
- 博世投资张翠波:自动驾驶需要突破芯片、传感器、深度学习算法等关键技术
- 机器人学中的一些概念3——雅克比矩阵
- 《LINUX3.0内核源代码分析》第二章:中断和异常 【转】
- 点击文字,把input type=radio也选中
- python增加工作日列_将工作日添加到日期字段
- 网卡多队列:RPS、RFS、RSS、Flow Director(DPDK支持)
- android UI设计属性中英对照表(未修订)
- 研究生学位论文撰写注意事项--清华大学学位论文
- 29 条运维工程师必会实用 Linux 命令
- java string 匹配次数_Java实现统计某字符串在另一个字符串中出现的次数
- windows 命令行代理设置
- 机器学习在网络流量分类中的应用
- 萧瑜 第一次博客随笔
- 阿里云创世纪之盘古传奇
- linux shell grep 非贪婪匹配
- 常用Hadoop命令
- 数学公式编辑器MathType 简介
- 51单片机串口通信模板_51单片机串口通信实例