Electron-vue 创建 Electron + Vue 项目

Electron 是由 GitHub 开发的一个开源框架。它允许使用 Node.js（作为后端） 和 Chromium（作为前端） 完成 桌面GUI应用 程序的开发。

我们所常用的 Visual Studio Code 和 Atom 都是基于 Electron 框架。

去年由于业务需求，有考虑将产品迁移至 Electron 来解决 Web 端的部分短板。

当时主要考虑的几点因素：

• 部分甲方不希望产品通过网页形式展现（要以客户端形式），再单独开发一套桌面应用成本较大
• 浏览器不支持 H265 原生视频播放
• 可以使用操作系统 API
• 产品特性因素，长期挂着 Web 端性能不佳

但使用 simulatedgreg/electron-vue 也是有条件的：

node@^7
vue-cli@2.x

你的项目基于 vue-cli@2.x 创建，并且由于各种因素没有升级计划，那可以考虑一下。

如果项目基于 vue-cli@3.x 创建，建议采取 electron-builder 方案构建开发环境。

项目搭建：

# 安装 vue-cli@2.x
yarn global add vue-cli

# 安装：脚手架样板代码
vue init simulatedgreg/electron-vue electron-project

# 设置应用名称 - my-project
Application Name (my-project)

# APP 的 ID 建议为 com.公司名.应用名 - com.example.yourapp
Application Id (com.example.yourapp)

# APP 版本 - 0.0.1    
Application Version (0.0.1)

# 项目描述 - An electron-vue project
Project description (An electron-vue project)

# 是否使用 Sass 或 Scss - Yes
Use Sass / Scss? (Y/n)

# 选择需要使用的 Vue 插件/依赖 - axios, vue-electron, vue-router, vuex, vuex-electron
? Select which Vue plugins to install (Press <space> to select, <a> to toggle al
l, <i> to invert selection)
❯◉ axios
 ◉ vue-electron
 ◉ vue-router
 ◉ vuex
 ◉ vuex-electron

# 使用 ESLint 语法检测 - Yes
? Use linting with ESLint? (Y/n) 

# 选择 ESLint 语法检测规则 - Standard
? Which ESLint config would you like to use? (Use arrow keys)
❯ Standard (https://github.com/feross/standard) 
  Airbnb (https://github.com/airbnb/javascript) 
  none (configure it yourself)

# 是否使用 Karma + Mocha 单元测试 - No
? Set up unit testing with Karma + Mocha? (Y/n)

# 是否使用 Spectron + Mocha 端到端测试 - No
? Set up end-to-end testing with Spectron + Mocha? (Y/n)

# 选择打包工具（builder 更轻量） - electron-builder
? What build tool would you like to use? (Use arrow keys)
❯ electron-builder (https://github.com/electron-userland/electron-builder) 
  electron-packager (https://github.com/electron-userland/electron-packager)

# 项目作者 - 自定义
? author (Ryan Zhong <hi@bluesdream.com>)

# 进入项目
cd electron-project

# 通过 yarn 安装依赖
yarn

# 运行项目
yarn run dev

# 项目编译
yarn run build

注：模板所默认安装的 Electron 版本为 2.0.4 若要使用更高版本需自行升级。

参考资料：

Electron 中文文档