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，裏邊的一些參數都是幹什麼用的。

更多內容請關注公衆號