Node環境搭建
本文假定你完成了nodejs的環境基礎搭建：
鏡像配置（暫時只配置node包鏡像源，部分包的二進制鏡像源后續討論）、全局以及緩存路徑配置，全局路徑加入到了環境變量
$ node -v
v12.18.1
$ npm -v
6.14.5
$ yarn -v
1.22.4
$ npm list -g --depth 0
+-- hexo@4.2.1 // 忽略Hexo，本人寫博用的
`-- yarn@1.22.4
vue腳手架安裝
為了更加便捷的創建一個vue項目，我們安裝腳手架@vue/cli和@vue/init（vue-cli已經deprecated了）。之所以要安裝@vue/init，是因為@vue/cli是3的版本，創建項目使用命令vue create app-name，且無法暫時無法使用模板，但是下文要用electron-vue模板進行創建，還是需要vue2的init命令來通過指定模板創建項目，為了兼容vue2的init特性，官方提供@vue/init作為橋接方式。
$ npm install -g @vue/cli
$ npm install -g @vue/cli-init
$ npm list -g --depth 0
+-- @vue/cli@4.4.6
+-- @vue/cli-init@4.4.6
+-- hexo@4.2.1
`-- yarn@1.22.4
關於init說明：
vue init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init)
至此，你可以使用如下的形式，利用vue腳手架結合模板（template）來初始化你的vue項目（app-name）結構
vue init [options] <template> <app-name>
初始化Electron項目結構
在指定的目錄下，我們使用如下的命令進行electron-vue的項目初始化：
$ vue init simulatedgreg/electron-vue electron-vue-demo
然而，這個過程很慢，甚至卡住不動。原因是指定模板進行創建時，會拉取github上的倉庫進行模板初始化。幸運的是vue提供模板離線初始化的功能。
下載模板源碼
https://github.com/SimulatedGREG/electron-vue
下載后解壓存放在 用戶目錄/.vue-templates/ 下（沒有就創建，注意復數s），形成如下的結構：
{home目錄}/
.vue-templates/
electron-vue-master/（目錄名隨便，但是在待會兒init指定的時候需要一致）
.github/
template/
....
之后就可以使用離線（offline）模式創建：
vue init --offline electron-vue-master electron-vue-demo # 名稱和上述文件夾名稱一致即可
之后就是按照向導進行創建工作：
$ vue init --offline electron-vue-master electron-vue-demo
> Use cached template at ~\.vue-templates\electron-vue-master
? Application Name electron-vue-demo（項目名）
? Application Id com.compilemind（Id，這里本人使用了自己的域名）
? Application Version 0.0.1（版本）
? Project description electron vue demo（描述）
? Use Sass / Scss? No（是否使用Sass/Scss編譯器）
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
axios, vue-el, ectron, vue-router, vuex, vuex-electron（插件包）
? Use linting with ESLint? Yes（啟用ESlint）
? Which ESLint config would you like to use? Standard（ESLint配置）
? Set up unit testing with Karma + Mocha? No（測試模塊）
? Set up end-to-end testing with Spectron + Mocha? No（測試模塊）
? What build tool would you like to use? builder # 這里我們使用electron-builder構建可執行程序
? author w4ngzhen <w4ngzhen@hotmail.com>
vue-cli · Generated "electron-vue-demo".
運行Electron-Vue示例
$ cd electron-vue-demo
$ yarn (or `npm install`)
$ yarn run dev (or `npm run dev`)
在install的過程中，我們會看到如下一段console輸出：
> electron@2.0.18 postinstall D:\Projects\electron-vue-demo\node_modules\electron
> node install.js
Downloading electron-v2.0.18-win32-x64.zip
[==========================================> ] 97.0% of 50.7 MB (2.77 MB/s)
可以注意到electron的node包安裝完成后，配置了postinstall（安裝完成后調用的腳本），該腳本執行其內部install.js腳本后，開始下載electron的二進制的文件。
首先為什么會有這個額外下載的過程呢？在本人看來，electron是基於Chromium內核的跨平台客戶端解決方案（本人另一篇文章正好進行了CefSharp的封裝工作），既然涉及到跨平台，而不同平台的底層實現必然有所差異，那么electron項目通過自己去實現跨平台，封裝底層邏輯，讓我們不關心底層的實現，而是專心於前端的開發，封裝成果就是上述的electron-v2.0.18-win32-x64.zip內容。這里因為我們調試和構建的時候，就需要運行時，所以electron根據我們的當前的平台，去下載了對應已經完成針對平台編譯封裝的二進制內容。
為什么要下載的問題搞明白了，接下來我們要看看如何去下載。有些朋友可能會發現，自己在進行electron二進制包下載的時候，速度慢的離譜。為什么這么慢？我會過一兩天對下載的腳本一探究竟（時間有限，過兩天寫）
現階段我們需要在.npmrc文件中增加一行配置，讓electron下載二進制文件的時候從指定的地方下載：
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
完成后，我們在install會發現有明顯的提升。完成node包的install后，我們運行命令
$ npm run dev
啟動后會發現客戶端能夠運行起來（即主進程能夠運行），但是渲染進程報錯：
Webpack ReferenceError:process is not defined，官方ISSUE已經存在該條：ISSUE
解決方案為：移除src\index.ejs中的該段代碼，詳細原因可以看ISSUE。
// src\index.ejs
<% if (!process.browser) { %>
<script>
if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>
<% } %>
移除后，再次運行可以看到渲染成功的界面。
引入ElementUI
引入ElementUI相關包
npm install element-ui -S
在渲染進程模塊的main.js中加入ElementUI組件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
...
Vue.use(ElementUI)
完成配置以后，我們就可以按照以往的方式進行前端的開發了。