簡介

像官網說的那樣，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。

還是根據自己的需要選擇

外掛方面

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，

打包

直接使用npm run build就可以打包，若是要針對不同平臺則按需新增引數，打包後的安裝包在專案的build資料夾下

最後

介面是兩天開發出來的。。所以某些樣式不太美觀。有個問題是打包以後iconfont不顯示了，這個問題後面再解決一下，最直接的辦法還是把它下到本地引用。 git地址