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
```

参考：

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

猜你喜欢