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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/linshuhe1/article/details/80415768

去年倒腾过一段时间的 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 并无差异,可以选择当前比较流行的前端框架,例如 AngularVueReact 等。这里选择较为轻量级的 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-clielectron-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 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

参考:

阅读更多

没有更多推荐了,返回首页