最近基於electron、vue、iviewUI開發了個客戶端程式，將折騰的過程記錄下。效果如圖

包管理器

現在的前端已經不是以前的前端了，流行前端模組化、工程化開發。湧現出了N多的框架(react、vue、angularjs)，這也讓程式碼共享成為了現實

前端專案需要程式碼共享，類似於Java專案的中jar、C語言專案的DLL，為了更便捷的使用這些共享的程式碼所以有了包管理器。

碰巧的是這些包管理器都是基於nodejs的，所以想使用這些必須要有node的支援

有人可能會覺得如果我建立的專案用不到node難道也要建立node專案嗎？當然不是，你可以選擇國外的webpack、parcel，國內百度的fis3。甚至更早期的gulp

我不是職業前端所以對於gulp瞭解得比較少。但是，無論你採用哪種打包方式對專案進行管理最終都需要用到包管理器，這是繞不開的！

NPM

中文文件：https://www.npmjs.cn/

倉庫地址：https://www.npmjs.com/

NPM是隨同NodeJS一起安裝的包管理工具，能解決NodeJS程式碼部署上的很多問題，常見的使用場景有以下幾種：

允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。允許使用者將自己編寫的包或命令列程式上傳到NPM伺服器供別人使用。

新版的nodejs已經集成了npm，所以之前npm也一併安裝好了。同樣可以透過輸入 "npm -v" 來測試是否成功安裝

YARN

官方文件地址：https://yarn.bootcss.com/

其實yarn和npm差不多都是為了管理node專案中的依賴模組，網路上很多人推薦使用這個，和npm相比較而言更友好一點兒，速度可能更塊一點兒。

**官方號稱：**Yarn 快取了每個下載過的包，所以再次使用時無需重複下載。 同時利用並行下載以最大化資源利用率，因此安裝速度更快。

其實個人感覺用途不大，除非職業前端否則誰沒事兒會經常下載重複的依賴

語法轉換

有了包管理器可以方便的使用別人編寫好的功能模組，但這是有代價的。既然人家的程式碼是模組化編寫的，我們自己的程式碼也需要使用同樣的規則

現在實現模組有三種方案可選：

CommonJS規範：它的API定義很多普通應用程式（主要指非瀏覽器的應用）使用的API，而我們熟知的NodeJS和webpack 就是是CommonJS規範的實現，AMD規範：如果說CommonJS規範主要是伺服器端JS模組化的話，那麼AMD就是將這個模組化的概念在客戶端(瀏覽器端)做了實現ES6規範：ES6或者說ES2015中天生就自帶模組化的屬性，即import和export

但是無論採用上面哪一種方式實現模組化方式編寫專案都存在一個問題，他們所使用的API瀏覽器無法解析，此時就需要使用各種轉換器對其語法進行轉換

以webpack為例，我們將所有需要透過webpack轉換的檔案以對應loader的方式進行轉換。我接觸webpack時的版本是3.x現在已經到了5.x 曾經有人戲稱前端應該多一個webpack配置工程師的崗位，透過這個你就可以想象得到這玩意兒有多麻煩了，所以針對這一步有人幫我們做了實現一般稱為腳手架

Vue CLI

官網文件地址：https://cli.vuejs.org/zh/

VueCLI是vue官方提供的一個專案腳手架工具，功能類似於Java中的Maven

關於舊版本

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli。 如果你已經全部安裝了舊版本的 vue-cli (1.x 或 2.x)，你需要先透過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 解除安裝它。

Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。

electron

官方口號：使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程式

中文文件：https://www.electronjs.org/docs

相信我，你絕對沒有興趣和信心去閱讀官方文件，因為一開始學習electron的時候，我被官網文件密密麻麻的概念所鎮住了

搭建專案

從零開始配置嗎？雖然有了vue官方提供的腳手架，我依然認為從零開始是一個不小的挑戰。所以藉助現有模板:https://github.com/SimulatedGREG/electron-vue

electron中文網特意說一下，百度很容易就搜到了。這個網站就是個坑(神坑)，我按照這上面搭建了2天都沒有成功

有了模板不要急，我們還有一些東西需要準備,我們在模板的README.md檔案中可以看到如下命令

# Install vue-cli and scaffold boilerplate

npm install -g vue-cli

vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app

cd my-project

yarn # or npm install

yarn run dev # or npm run dev

問題一：vue init此命令為vue-cli2.x命令，如果碰巧你裝的是3.x甚至4.x不好意思會一直提示你沒安裝vue-cli

問題二：simulatedgreg/electron-vue：會主動從github下載東西，然後我試過10次有9次是連線超時

問題一比較好解決，解除安裝當前版本的vue-cli安裝2.x即可解決。問題二的話可以先從github下載這個專案，然後執行以下命令

# D:\vip\template\electron-vue是我存放模板專案的位置，下載之後就是這個名字

# electron-vue-demo3是我創建出來的electron專案名稱

vue init D:\vip\template\electron-vue electron-vue-demo3

最後一個問題，理論上經過以上的方式可以順利地把專案建立完成，但是當你安裝依賴模組時大機率會卡在install.js介面。原因是electron會去下載東西受限於國內網速所以基本上就是timeout了

解決辦法：在專案的根目錄下建立一個.npmrc的檔案，新增以下內容

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

registry=https://registry.npm.taobao.org

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

electron_mirror=https://npm.taobao.org/mirrors/electron/

其實就是新增一下electron代理提升下載速度

.npmrc檔案扔在${USER_HOME}目錄下一樣有效果（僅在windows上測試了），我的檔案內容如下

registry=https://registry.npm.taobao.org/

home=https://npm.taobao.org

以上純屬個人觀點，如果有不正確的地方還請各位指正