一、简介
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
本文将一步步教你使用Electron12和vue+cli,构建跨平台桌面应用,实现功能的同时,保留前端最主流熟悉的基本框架结构
本文不涉及Node、Electron和vue的详细开发教程,仅以实现两者结合为目的,如深入学习Electron和vue,请访问官方:
Node.js: https://nodejs.cn
Electron: https://electronjs.org/
vue-cli: https://cli.vuejs.org/zh/
二、环境安装
1、安装Node.js,已经按照了的可以忽略,nodejs的安装请自行查看node官网安装,意见最新稳定版
2、安装cnpn,国内使用npm很慢,尤其是后面一些electronjs的配置,基本每次都失败,建议可以安装cnpm,从国内淘宝镜像下载,执行以下命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、在github上有个electron-vue的项目是比较火的,但这个项目使用的electron版本太老了,项目本身也很久都没有更新过,而且其生成的工程结构并不是vue-cli3。所以放弃使用。
4、安装vue/cli,已经按照了的可以忽略,作者安装的版本是 @vue/cli 4.5.11
cnpm install -g @vue/cli
5、创建vue项目
vue create demo-electron
以下是vue项目的创建流程,熟悉的可以跳过,也可以按照自己习惯的方案配置
5、改造vue项目为多页面配置模式,大家在使用一些客户端应用的时候经常可以看到,一个应用有多个窗体,为了方便实现多窗体应用,我们将vue项目改为多页面配置模式。
在根目录增加vue.config.js文件,具体的配置项参数可以查看vuecli网站文档。
vue.config.js
const path = require('path'); const glob = require('glob'); function resolve(dir) { return path.join(__dirname, dir); } module.exports = { publicPath: './', // 将构建好的文件输出到哪里 outputDir: 'dist', pages: { index: { entry: glob.sync('src/apps/index/main.js'), template: 'public/index.html', filename: `index.html`, title: 'demo-electron’, }, login: { entry: glob.sync('src/apps/login/main.js'), template: 'public/index.html', filename: `login.html`, title: 'demo-login', }, }, // 当设置为 `"error"` 时,检查出的错误会触发编译失败。 lintOnSave: true, // 通过这个选项可以显式转译一个依赖。 transpileDependencies: [ /* string or regex */ ], // 是否为生产环境构建生成 source map? productionSourceMap: false, // 在多核机器下会默认开启。 parallel: require('os').cpus().length > 1, // 配置 webpack-dev-server 行为。 devServer: { open: process.platform === 'darwin', host: '', port: 8080, https: false, hotOnly: false, disableHostCheck: true, }, chainWebpack: (config) => { config.resolve.alias.set('@', resolve('src/common')).set('src', resolve('src')); }, };
我这里构建的是一个实例,主功能页面和一个登陆页面,具体的按自己项目功能。
然后调整了‘@’符别名的默认目录。
项目目录结构如下图所示