electron-vue 集成Element UI

electron-vue 文档：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

cnpm i element-ui -S

然后按照文档中快速上手的指示，在src/renderer/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')

去src/renderer/components/LandingPage.vue中开始体验element-ui，直接把element-ui上的示例代码复制过来运行，结果发现一个很诡异的事情，el-table这个表格组件好像很特殊！它怎么都显示不出来，除了它以外其他的控件都能正常显示

各种搜索，终于在github上面找到了答案：https://github.com/SimulatedGREG/electron-vue/issues/361

根据electron-vue作者自己的回复，element-ui需要加入到白名单里面，需要修改.electron-vue/webpack.renderer.config.js

将：

let whiteListedModules = ['vue']

修改为：

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

然后表格控件就正常显示了！

可以在element官网中找案例代码