緣起
上文簡單介紹了 Electron藏澳，以及如何搭建環(huán)境來進(jìn)行開發(fā)。現(xiàn)實(shí)開發(fā)中耀找，從頭開始使用 HTML5、JS野芒、CSS 來構(gòu)建應(yīng)用畢竟還是一件苦差事蓄愁。鑒于 Vue 是目前國內(nèi)前端開發(fā)的主流技術(shù)棧之一，本文來趟一下如何使用 Vue 開發(fā) Electron 桌面應(yīng)用這個(gè)坑狞悲，減少一些大家搭建環(huán)境中可能會(huì)碰到的問題。
設(shè)置 npm 國內(nèi)源
以下命令設(shè)置 npm 到國內(nèi)的淘寶源地址摇锋。
$ npm config set registry https://registry.npm.taobao.org
驗(yàn)證一下：
$ npm config get registry
https://registry.npm.taobao.org
如果看到輸出是 https://registry.npm.taobao.org，這表明設(shè)置成功的乱投。
參考： npm配置國內(nèi)源方法
設(shè)置 Electron 國內(nèi)源
Windows
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
Mac
- bash
echo "export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/" >> ~/.bash_profile
. ~/.bash_profile
- zsh
echo "export ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/" >> ~/.zshrc
. ~/.ashrc
安裝 yarn【可選】
本文將使用 yarn 作為 Node.js 的包管理器咽笼。至于 npm 與 yarn 孰優(yōu)孰劣，則仁者見仁戚炫、智者見智剑刑，不便評(píng)說双肤。
官方推薦的安裝 yarn 的命令如下：
$ npm install -g yarn
筆者在 Mac 上是使用 homebrew 安裝的 yarn：
$ brew install yarn
目前的最新版本是 1.22.5。
$ yarn -v
1.22.5
homebrew 的國內(nèi)源設(shè)置請(qǐng)參考 清華大學(xué)Homebrew/Linuxbrew 鏡像使用幫助茅糜。
安裝 Vue CLI
本文將通過 Vue CLI 來安裝 Vue.js七芭，其他的安裝方式可以參考官方的 Vue Installation蔑赘。
$ yarn global add @vue/cli
yarn global v1.22.5
[1/4] ?? Resolving packages...
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi@15.1.1: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning @vue/cli > @vue/cli-shared-utils > @hapi/joi > @hapi/address@2.1.4: This version has been deprecated and is no longer supported or maintained
warning @vue/cli > @vue/cli-shared-utils > request > har-validator@5.1.5: this library is no longer supported
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning @vue/cli > @vue/cli-ui > vue-cli-plugin-apollo > nodemon > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @vue/cli > globby > fast-glob > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] ?? Fetching packages...
[3/4] ?? Linking dependencies...
[4/4] ?? Building fresh packages...
success Installed "@vue/cli@4.5.4" with binaries:
- vue
? Done in 43.85s.
可以看到预明，當(dāng)前 Vue CLI 的最新版本是 4.5.4耙箍。
$ vue --version
@vue/cli 4.5.4
注： Windows 下面推薦使用 npm 安裝撰糠，否則有一定概率 vue 命令無法識(shí)別辩昆。 安裝命令如下：
$ npm install -g @vue/cli
生成 vue 工程
使用 vue create 命令創(chuàng)建工程，選項(xiàng)保持默認(rèn)（使用 vue 2）即可汁针。
$ vue create electron-vue-demo
?? Successfully created project electron-vue-demo.
?? Get started with the following commands:
$ cd electron-vue-demo
$ npm run serve
驗(yàn)證 vue 工程
$ cd electron-vue-demo
$ npm run serve
DONE Compiled successfully in 2379ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.5:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
通過瀏覽器范圍訪 http://localhost:8080/，如果看到下圖施无，說明工程創(chuàng)建成功。
添加 electron-builder 支持
$ vue add electron-builder
? Successfully invoked generator for plugin: vue-cli-plugin-electron-builder
Mac 系統(tǒng)下帆精，如果該命令執(zhí)行時(shí)間過長，可以嘗試下面的命令：
$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" vue add electron-builder
運(yùn)行開發(fā)版
執(zhí)行以下命令卓练，啟動(dòng) dev server。
$ yarn electron:serve
或者
$ npm run electron:serve
運(yùn)行的效果：
打包
執(zhí)行以下命令襟企，進(jìn)行打包：
$ yarn electron:build
OR
$ npm run electron:build
如果再 Mac 系統(tǒng)下，首次打包緩慢顽悼，也可以嘗試以下命令：
$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" yarn electron:build
OR
$ ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" npm run electron:build
Windows 系統(tǒng)下的加速操作（在上面設(shè)置過 electron mirror 的前提下）：
- 到 C:\Users<用戶名>\AppData\Local\electron-builder\Cache 下面，建立 nsis 和 winCodeSign 兩個(gè)目錄蔚龙。
- nsis目錄下， 將事先下載好的 nsis-3.0.4.1.7z 和 nsis-resources-3.4.1.7z 分別解壓到子目錄 nsis-3.0.4.1 和 nsis-resources-3.4.1 目錄下 木羹。
- winCodeSign 目錄下，將事先下載好的 winCodeSign-2.6.0.7z 解壓到子目錄 winCodeSign-2.6.0目錄下 坑填。
npm run electron:build
【Mac】打包后的文件如下：
【W(wǎng)indows】 打包后的文件如下：
示例工程
示例工程可以從 github 上獲取抛人，地址是 electron-vue-demo。
