前面文章我們講過 electron 讓可以用 HTML、JS、CSS 開發桌面應用程序。而 electron-vue 是一個結合了 electron 與 vue 的套件。這樣我們就能方便地使用 vue 快速開發桌面應用。但是，vue 只是在 js 這層面做了大量的便捷的操作。對 UI 并未過多涉及。此時如果您在開發過程中自己實現一套統一主題的 UI 視覺效果，借助成熟的 element-ui 或 bootstrap 肯定是最好的。

本文將介紹怎么讓 electron-vue 與 element-ui 結合更加快捷開發我們的桌面應用程序。

一、安裝 element-ui

這個安裝非常簡單。
如下命令：

> npm i element-ui -S

記住這個命令是在 electron-vue 創建的項目根目錄安裝噢~

二、使用 element-ui

安裝成功之后，我們現在就把它用到我們的 electron-vue 項目中。

1）main.js 文件加載 element-ui

打開 src/renderer/man.js 加載 element-ui

......
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
......

main.js 加載之后的完整代碼示例：

import Vue from 'vue'
import axios from 'axios'import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'import App from './App'
import router from './router'
import store from './store'Vue.use(ElementUI)if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({components: { App },router,store,template: '<App/>'
}).$mount('#app')

在 main.js 加載 element-ui 之后，您可以在任何 .vue 文件中直接使用 element-ui 提供的組件。

2）使用 element-ui 組件

為了能快速驗證您安裝的 element-ui 是否生效。我們可以用 src/renderer/App.vue 來進行演示。

打開 App.vue 加入以下代碼：

<el-row><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button>
</el-row>

注：此代碼就定要加在 <template>...</template> 里面。

此時我們可以通過yarn run dev 或 npm run dev 查看效果。此時會看到顯示一組按鈕。

三、編譯安裝包

我們通過 yarn run dev 這種形式開發能正常顯示結果。但是它存在一個問題:通過 electron-package 或 electron-builder 編譯成安裝包的時候會導致界面空白一片。

終于原因是 electron-vue 默認的組件里面只有 vue 才在編譯白名單內。如果使用了第三方的的類庫，一定要加到白名單。

修改：./.electron-vue/webpack.renderer.config 腳本。腳本如下代碼：

let whiteListedModules = ['vue']

更改為：

let whiteListedModules = ['vue', 'element-ui']

如果以后加載了其他的跟頁面渲染相關的類庫，都要在這里添加到白名單。否則，通過 yarn run build 或 npm run build 生成的安裝包都將無法正常渲染界面出現空白的情況。

四、示例欣賞

以下示例就是我自己開發的一小玩意殘次器。
它包含：

• electron-vue
• element-ui UI 庫
• electron-package 打包
• 自定義系統托盤圖標以及托盤圖標右鍵菜單
• 自定義系統標題欄（最小化/最大化/關閉）

注：在修改 src/main/index.js 的時候一定要注意開發環境與編譯環境的處理。比如，我的處理方式如下：

if (process.env.NODE_ENV !== 'development') {// 系統托盤右鍵菜單var trayMenuTemplate = [{label: '設置',click: function () {} //打開相應頁面},{label: '意見反饋',click: function () {}},{label: '幫助',click: function () {}},{label: '關于我們',click: function () {}},{label: '退出',click: function () {app.quit();}}];trayIcon = path.join(__dirname, 'static/app.ico');appTray  = new Tray(trayIcon);// 圖標的上下文菜單const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);// 設置此托盤圖標的懸停提示內容appTray.setToolTip("It助手\n您的開發小幫手");// 設置此圖標的右鍵菜單appTray.setContextMenu(contextMenu);}

關鍵代碼：

if (process.env.NODE_ENV !== 'development') {
// code ...
}

通過 yarn run dev 的時候就是開發環境。通過 yarn run build 的時候就是編譯環境。上面就是判斷當前環境不是開發環境的時候生效。因為，在開發環境有很多如果底層支持的功能（系統托盤圖標）是無法在開發環境使用的。所以，我們要做環境區分。