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

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

electron 安装

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

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

  $ npm install -g package --registry=https://registry.npm.taobao.org复制代码

  或直接使用 cnpm 工具。

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

具体的步骤可以参考我之前的博客

UI 方案

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

安装 electron-vue 框架

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

• 先安装 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 <695671725@qq.com>   vue-cli · Generated "exceltools".---All set. Welcome to your new electron-vue project!Make sure to check out the documentation for this boilerplate athttps://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复制代码

  ​

参考：

更多技术分享，请关注微信公众号「何乐不为呢」