Electron + Vue 构建桌面应用
第一步 环境准备
-
安装nodejs 中文官网-下载符合操作系统,默认安装即可
-
配置 npm 配置淘宝镜像
npm install package --registry=https://registry.npm.taobao.org
npm install -g cnpm --registry=https://registry.npm.taobao.org -
安装vue-cli(本文采用最新版本4.x)
npm install -g @vue/cli ## 如果已经安装,可以更新最新 npm update -g @vue/cli ## 查看版本号 vue --version ## @vue/cli 4.5.4 ## 安装 vue-cli-plugin-electron-builder 插件 npm install -g @vue-cli-plugin-electron-builder
第二步 创建项目
-
创建vue 项目
vue create hello-word
此安装过程可以默认安装,如果使用typescript 需要手动选择依赖,本文不在赘述。
-
使用vue-cli-plugin-electron-builder插件转换项目为electron项目
vue-electron-builder插件地址vue add electron-builder
至此,项目创建成功!可以进行 Electron Vue桌面开发。
第三步 配置相关
-
项目根路径创建文件 vue.config.js (参考如下配置)
module.exports = { devServer: { port: 8080, // 端口 host: '127.0.0.1', // 访问地址(域名或者IP) overlay: { warnings: false, errors: false } }, lintOnSave: false, // 以下为多页面配置 pages: { workbench: { entry: 'src/renderer/workbench/main.ts', template: 'public/workbench.html', filename: 'workbench.html' }, login: { entry: 'src/renderer/login/main.ts', template: 'public/login.html', filename: 'login.html' } }, pluginOptions: { electronBuilder: { // electron应用构建输出目录 outputDir: process.env.VUE_APP_OUTPUT_DIR, builderOptions: { appId: 'hello.world', // 应用名称 productName: process.env.VUE_APP_PRODUCT_NAME, copyright: 'Copyright © 2019.01 chuangyeifang163', // 配置发布地址 用于发版更新 publish: [{ provider: 'generic', url: process.env.VUE_APP_DOWNLOAD_URL }], // 兼容 32/64系统 win: { icon: 'src/logo.ico', target: [{ target: 'nsis', arch: [ 'x64', 'ia32' ] }] } }, // 主进程文件所在位置 mainProcessFile: 'src/main/main.ts' } } }
咨询方式
- 邮件:chuangyeifang163@163.com
- 留言
- 后续会创建一个项目,供大家参考(个人github地址有关于electron vue开发)