electron-vue初探

前端技术发展迅速，各种框架层出不穷，不外乎要借助浏览器去实现渲染。

最近一朋友想让我帮他做个打印机的插件，实现打印特定内容的功能，但又不接受网页的形式，于是技术选型我选择了electron，正好我之前也没玩过electron，就决定搞个桌面端demo试试。

什么是electron?

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

也就是说，你只要懂前端开发的一些技术，便可以构建开发出跨平台的桌面应用。可以运行于windows、linux、macOS等不同的操作系统。

Electron官网

开发环境

开发环境为node.js，请至node.js官网安装

安装electron

笔者使用的是yarn进行安装，其他用户也可以自行选择npm、cnpm等其他包管理工具进行安装

yarn global add electron

因笔者平时接触Vue较多，所以直接选择了electron-vue模版，该模版使用了vue-cli脚手架，webpack配置包括了vue-loader、electron-packager、electron-builder和一些常用的插件，比如vue-router、vuex

因electron-vue使用了vue-cli的脚手架，所以在使用前请确认安装了vue-cli

yarn global add vue-cli

vue init simulatedgreg/electron-vue my-project

cd my-project
yarn # or npm install
yarn run dev # or npm run dev

下载好的模板目录结构如下：

src文件夹下面分为main和render。

electron中有主进程和渲染进程两个概念，什么是主进程和渲染进程呢？
依笔者的理解为：
渲染进程——（绝大部分情况下）渲染进程指的是html页面
主进程——是指在package.json文件内的 mian字段，而且主进程有且只有一个，本文就是index.js，所以读者也可以认为index.js就是主进程。
而它们就是让网页产生交互行为的关键

我们在开发过程中把主要的精力集中在渲染进程中即可。

然后就是像开发vue项目一样尽情发挥了。

笔者项目中使用了element-ui，如何在项目中使用element-ui？
在渲染进程也就是render文件夹下找到main.js，然后在main.js里引入element-ui。
因笔者demo项目较小，没必要完整引入element-ui，所以项目中选择了按需引入部分element-ui的组件，相关引入方式请戳element-uii 引入方式

同时记得引入element-ui的css文件

import 'element-ui/lib/theme-chalk/index.css';

打包

打包发布有两种方式

• electron-packager，打包方式比较简单，想为哪个平台打包，执行相应命令即可。
  在package.json里进行相关配置

  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder --platform=win32  --arch=ia32",
    "win32": "node .electron-vue/build.js && electron-builder --platform=win32  --arch=ia32",
    "mac": "node .electron-vue/build.js && electron-builder --platform=drwin ",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "e2e": "npm run pack && mocha test/e2e",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "test": "npm run unit && npm run e2e",
    "unit": "karma start test/unit/karma.conf.js",
    "postinstall": "npm run lint:fix"
  },

• electron-builder，自动化部署，持续集成，只要监测到 github 上绑定的代码仓库发生了变化，即可打包发布。配置有一点麻烦，想了解的请戳https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using-electron-builder.html

笔者在打包的时候踩了个坑，给其他人引以为鉴。
在打包的时候一直出现打包失败，查了好久，后来发现是文件夹路径里有中文，后来更改之后便可以打包成功了。也给其他人提个醒，在打包时文件夹路径中不要出现中文。