electron-vue 实践 1 —— 安装和创建工程

去年倒腾过一段时间的 electron ，但最终没做出什么东西来，最新刚好要帮一个做审计工作的朋友做一个桌面软件，所以打算正儿八经地研究一下。我们都知道 electron 相当于一个浏览器的壳子，里面的内容开发其实与 web 网页开发并无明显区别，只是通过此框架提供了可以直接操作系统的 native API ，大部分接口是普通浏览器做不到的。

electron 安装

有资源问题，在国内使用 npm 直接安装 electron 是比较麻烦的，有两个解决方案：

• 通过修改 npm 镜像获取地址：

  $ npm install -g package --registry=https://registry.npm.taobao.org

  或直接使用 cnpm 工具。

• （看个人习惯了，我现在是习惯了面向 google 编程）

具体的步骤可以参考我之前的博客 《Electron 开发》 环境配置和Helloworld

UI 方案

由于 electron 的 UI 也是使用 HTML + CSS 实现的，所以 UI 开发与 Web 并无差异，可以选择当前比较流行的前端框架，例如 Angular 、Vue 或 React 等。这里选择较为轻量级的 vue ，一方面是学习成本最低，其次也有比较成熟的整合到 electron 框架中的开源手脚架 electron-vue ，再配合基于 vue 2.0 封装好的组件库 Element ，UI 开发工作显然要简单许多。

安装 electron-vue 框架

最终选择 vue 作为应用的 UI 框架，使用 vue-cli + electron-vue 来搭建项目，参考 electron-vue中文文档 创建步骤如下：

• 先安装 vue-cli 工具：

  $ npm install -g vue-cli

• 使用 vue-cli 和 electron-vue 创建工程：

  $ vue init simulatedgreg/electron-vue exceltools
  ​
  ? Application Name exceltools
  ? Project description An electron-vue project
  ? Select which Vue plugins to install axios, vue-electron, vue-router, vuex
  ? Use linting with ESLint? No
  ? Set up unit testing with Karma + Mocha? Yes
  ? Set up end-to-end testing with Spectron + Mocha? Yes
  ? What build tool would you like to use? builder
  ? author linshuhe1 <[email protected]>
  ​
     vue-cli · Generated "exceltools".
  ​
  ---
  ​
  All set. Welcome to your new electron-vue project!
  ​
  Make sure to check out the documentation for this boilerplate at
  https://simulatedgreg.gitbooks.io/electron-vue/content/.
  ​
  Next Steps:
  ​
    $ cd exceltools
    $ yarn (or `npm install`)
    $ yarn run dev (or `npm run dev`)

  注意：

  • 应用名不能带大写字母，否则会报错："Sorry, name can no longer contain capital letters."

  • 不使用 eslint ，可避免书写规范的检查

• 安装依赖：

  在工程创建完成后，进入工程并使用 yarn 或 npm 安装依赖：

  $ cd exceltools
  $ npm install   # 安装依赖包
  $ npm run dev   # 开发环境运行

  也可以使用 yarn 安装依赖，假如还未安装 yarn 可以使用 npm 全局安装：

  $ npm install -g yarn

  但我在 windows 下使用 yarn 安装download-chromedriver.js 依赖会报错，使用 npm 就正常。 mac 下恰好相反，使用 npm install 安装会报错，使用 yarn install 才正常。

• 运行 debug 模式：

  $ npm run dev

  直接使用开发环境运行项目，会有调试面板等工具。运行成功可以看到弹窗：

  

• 打包发布：

  $ npm run build

  ​

参考：

• 1、electron-vue安装

• electron-vue/起步