electron-vue跨平台桌面应用开发实战教程（一）——Hello World

本文将带领你们使用vue-cli + electron-builder构建一个Hello World

Electron是一个基于Chromium和 Node.js，可使用 HTML、CSS和JavaScript构建跨平台应用的技术框架，兼容 Mac、Windows 和 Linux。

在开始搭建项目以前，须要安装如下工具

1. node.js

1 建立项目

1.1 安装vue-cli

先查看是否已经安装了vue-cli，vue-cli的版本是什么

vue -V

若是版本叫老，能够直接卸载，再安装最新版本

卸载

npm uninstall vue-cli -g

安装

install @vue/cli -g

1.2 使用vue-cli建立项目

选取一个项目存放的路径，而后开始建立项目
例如：

vue create electron-vue-helloworld

这里将项目名定为：electron-vue-helloworld
输入完上述命令以后进入vue项目的建立过程。出现如下内容

Vue CLI v3.8.4
? Please pick a preset: (Use arrow keys)
  default (babel, eslint) 
> Manually select features

第一个选项是 “default” 默认，只包含babel和eslint
第二个选项是 “Manually select features”自定义安装

选择自定义安装，进入下一步选择

? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

这里咱们选择

1. babel（高级的语法转换为 低级的语法）
2. Router（路由）
3. Vuex（状态管理器）
4. CSS Pre-processors（css预处理器）
5. Linter / Formatter（代码风格、格式校验）

而后进入下一步

? Use history mode for router? (Requires proper server setup for index fallback 
in production) (Y/n)  n

这一步是设置router是否使用history模式，这里咱们选n，接着进入下一步

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): (Use arrow keys)
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
❯ Stylus

这里是设置css预处理模块，在这里我要强调一下，不须要乱选，选择咱们熟悉的一种，在这里咱们选择 Stylus ，而后进入下一步

? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only 
  ESLint + Airbnb config 
❯ ESLint + Standard config 
  ESLint + Prettier

这一步是选择ESLint代码检查工具的配置，这里咱们选择标准配置“ESLint + Standard config”，而后进入下一步

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

这一步是选择何时执行ESLint检查，这里咱们选择保存时检查“Lint on save”,而后进入下一步

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? 
  In dedicated config files 
❯ In package.json

这一步是询问 babel, postcss, eslint这些配置是单独的配置文件仍是放在package.json 文件中，这里咱们选择“In package.json”，而后进入下一步

? Save this as a preset for future projects? (y/N) N

这一步是询问时候之后建立项目是否也采用一样的配置，这里咱们选N。到目前为止，vue项目是建立完成了，咱们等待项目下载依赖包，等项目构建完毕咱们开始集成electron

1.3 使用electron-builder集成electron

进入项目根目录（electron-vue-helloworld），而后执行下列命令：

vue add electron-builder

这个时候会安装electron-builder的依赖，可能比较耗费时间，请你们耐心等待，安装完成后会出现如下选型：

? Choose Electron Version (Use arrow keys)
  ^4.0.0 
  ^5.0.0 
❯ ^6.0.0

这一步是选择Electron的版本，咱们这里选择最新版本6.0.0，等待安装完成便可。安装完成后会在src目录下生成background.js，并在package.json 文件中修main为"main": "background.js"

至此，全部的安装都已经完成了，接下来咱们就能够运行程序看效果了。

1.4 运行程序

执行如下命令，运行程序

npm run electron:serve

在启动的时候，会启动好久，并出现如下信息

INFO  Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times

这是在安装vuejs devtools，因为网络问题，一直安装不上。重试5次以后就会自动跳过而且启动程序。

编译成功后，会自动弹出一个桌面程序，以下图所示

下一期咱们将详细的讲一下background.js，里边的一些参数都是干什么用的。

更多内容请关注公众号