像官網說的那樣，electron-vue就是基於 vue 來構造 electron 應用程序的樣板代碼。electron-vue開發起來就和vue一樣，只是如果有特殊的需求需要修改應用的話就要用到electron相關的api.
electron
Electron是由Github開發，用HTML，CSS和JavaScript來 構建跨平臺桌面應用程序 的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個運行時環境中，並將其打包為Mac，Windows和Linux系統下的應用來實現這一目的。(摘之官網)
vue
vue的話就不多提了，網站
預覽
項目流程
可以先去electron官網瞭解一下它的開發流程，知道它大體是個怎樣的情況就好，後面使用的時候可以再來看看它的api.
搭建
npm install -g vue-cli
vue init simulatedgreg/electron-vue ele-vue
cd ele-vue
npm install
npm run dev
複製代碼
安裝過程中一路回車就行，中途會有個讓你選擇插件的時候，也是為了後面自己手動去裝，這裡就根據需要選擇。
electron-packager
如果你剛開始製作 electron 應用程序或只需要創建簡單的可執行文件，那麼 electron-packager 就可以滿足你的需求。
electron-builder
如果你正在尋找完整的安裝程序、自動更新的支持、使用 Travis CI 和 AppVeyor 的 CI 構建、或本機 node 模塊的自動重建，那麼你會需要 electron-builder。
還是根據自己的需要選擇
這些完成以後就可以像開發vue一樣去開發項目了。
插件方面
electron-vue中也是能使用前端的ui組件的，以element-ui為例
npm i element-ui -S
然後在main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
複製代碼
electron
一點自己的配置
mainWindow = new BrowserWindow({
height: 670,//窗口高度
width: 1000,//窗口寬度
frame: true,//是否顯示窗口邊框
resizable: false,//可否縮放
movable: true//可否移動
})
複製代碼
iconfont
element的icon可能並不能滿足我們的需求，這時候可以選擇使用阿里的iconfont。
先去iconfont官網選擇你想要的icon，
選擇添加到你自己的項目
然後可以在自己的項目中選擇生成，複製代碼到electron-vue項目的index.ejs中，正常引用css <link rel="stylesheet" href="//at.alicdn.com/t/font_883876_bfzwywhpal.css"> 使用 <i class="iconfont icon-play-circle"></i>
打包
直接使用 npm run build 就可以打包，若是要針對不同平臺則按需添加參數，打包後的安裝包在項目的build文件夾下
結語
界面是兩天開發出來的。。所以某些樣式不太美觀。有個問題是打包以後iconfont不顯示了，這個問題後面再解決一下，最直接的辦法還是把它下到本地引用。
最後，有需要前端資料的小夥伴可以私信我“前端”、“前端資料”