自從eclectron出現，到現在已經很久了，在這裡，歷史就不談了，直接上乾貨。

本人也是剛開始接觸electron，只是對前端也能實現桌面開發有點好奇，就玩了一下，剛開始看electron的文件一臉懵，耐著性子看完了。

著手寫一個簡單的專案，如果你著手寫一個electron的專案，只需要具備兩個條件，第一個你仔細閱讀了electron

的文件，並有了一定的瞭解和看法，第二你的js很熟練。所以相對於實現一個electron的專案而言，難的並不是實現，而是實現  的過程，還有electron專案的打包，這中間會有各種坑，特別對於我們這些剛接觸electron的人來說。

這次介紹一個第三方庫electron-vue，看名字就知道了，他是electron和vue的結合體，很輕鬆的就可以把你的vue專案轉化為桌面專案。文件：https://simulatedgreg.gitbooks.io/electron-vue/content/en/renderer-process.html

下面開始講解專案的實現過程，不過再講解之前，需要一些準備工作，當然說到vue，node是必不可少的，還有vue的腳手架vue-cli，這兩個安裝完畢，就可以開始寫專案了。

1.首先建立一個electron-vue的專案

vue init simulatedgreg/electron-vue my-project

我是之前已經建立過這個專案，所以他提示我是否繼續建立，不過沒什麼影響，一路繼續就好了，和vue的建立很像。

2.進入專案目錄

cd my-project

這裡還有一點和vue不太一樣，vue在建立的時候就會自動安裝依賴，但是electron-vue不會，需要你手動安裝依賴

npm i (這裡需要說明一下，雖然用cnpm安裝會更快，但是這裡還是推薦用npm，不然後面可能會出現一些莫名的坑)

安裝完成，下方就是electron-vue的目錄

.electron-vue：webpack和electron的一些配置

build：專案打包後的檔案

src：裡面有兩個資料夾

      main：看過electron的都知道electron專案裡有一個main.js的檔案，這個檔案和main.js是同樣的功能

      renderer：是vue的程式碼檔案，按vue的實現方法寫就可以，在這裡盡情的寫vue程式碼吧

package.json：這個就不需要我多說了吧（會vue的都知道）

3. 執行看一下效果

npm run dev

ok，完美顯示

4.試試打包，畢竟桌面端，怎麼可以沒有.exe檔案

electron-vue有內建的打包，你只需要執行 npm run build就可以了

每次重新打包前，執行一下npm run build:clean 清楚之前打包的程式碼，在執行打包。

開始打包

不報錯，就說明打包完成，點選build檔案下的.exe檔案，看下效果

可以了，下面去放心實現你的桌面專案吧。

我也是剛接觸electron，大家一起交流，有問題歡迎指出。