electron-vue + element-ui構建桌面應用

最近需要用Node.js做一個桌面的應用，了解到electron可以用來做跨平台的桌面應用，而vue可以用來作為界面的解決方案，研究了一會兒如何把他們兩個整合到一起使用，遇到了各種問題而放棄，畢竟作為一個非前端開發人員我的目的就是看這個東西能不能滿足我的需求，而不想浪費太多的時間在上面，后來又看到了electron-vue，顧名思義就是將electron和vue整合到了一起直接使用，於是開始嘗試搭建基於electron-vue的項目。

整個搭建過程對非前端開發來說還算可以，只是后面踩了兩個坑費了一些時間，感覺應該大部分人都會遇到，因為我的一切步驟基本都是在官方文檔的指導下完成的，如果出了問題那么很大可能是框架固有問題

根據官網給出的方法安裝Node：

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs

這個步驟需要curl，如果發現沒有安裝curl，可以用下面的命令安裝一下：

sudo apt install curl

然后通過：

node -v
npm -v

查看一下node和npm是否成功安裝上

正常情況下，可以使用 npm install [module-name] 來安裝需要的模塊

但是npm下載模塊的時候經常有各種各樣的報錯，大多數報錯原因都在於npm下載速度太慢了，可以用cnpm（淘寶npm鏡像）的方式來安裝

獲取cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

接下來就像使用npm一樣來使用cnpm即可，如果在使用cnpm的過程中看到報錯信息有permission denied相關，直接在命令的前面加sudo就好了

后面經過一番折騰，發現還是用全局安裝vue-cli腳手架的方式最好：

[sudo] cnpm install -g vue-cli

繼續，通過vue init使用electron-vue模板來初始化項目：

vue init simulatedgreg/electron-vue my-project

這個過程會先下載模板，等待一會兒之后就會彈出下面的提示來配置項目，這里強烈建議把use ESLint給禁掉，因為這個東西真的是很嚴格，導致我后面遇到了很多代碼格式的問題，還是比較惡心的，其他的像是unit test的東西也不是很了解，而且也用不到就都給禁用了，免得出什么幺蛾子，其他的都可以直接一路Enter使用默認的即可

設置完成后同樣也又相應的提示：

可以看到它已經給了提醒如何安裝和運行，這里我沒有使用yarn來運行，而是直接使用[sudo] cnpm install，然后cnpm run dev來運行（npm也可以，因為是用來運行而不是下載）

等待程序啟動......

然后......

surprise!~

應用是看到了，可是里面有貌似是有報錯啊：

process is not defined... 什么鬼，我還什么都沒動呢，進程沒有被定義？於是又去了解了一下主進程和渲染進程的知識，大概研究了一下放棄了，有點浪費時間而且直覺告訴我不是這個問題

可以看到報錯信息找到src/index.ejs中，既然process沒有定義，那簡單粗暴點，直接刪除了用到process的這段看看行不行：

結果還真就可以了，運行起來后是這樣的：

如果覺得這個方式不靠譜，隨便亂刪原生代碼感覺確實會有什么后遺症，可以看下面另一種解決方式。

 

發現Element里面的UI還是很好看的，想要使用一下，於是開始集成element-ui：

同樣按照官網的順序（直接搜索element-ui就能找到官網了很方便）：

[sudo] 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這個表格組件好像很特殊！它怎么都顯示不出來，除了它以外其他的控件都能正常顯示

找了幾個做web的同事來大概摟了一眼，都說代碼寫的沒有問題，奇怪了，於是開始各種搜索，終於在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']

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

 

偶然發現上面的process is not defined問題，在github上面也是有人提了issue的https://github.com/SimulatedGREG/electron-vue/issues/871，除了直接刪除我截圖中的代碼的方式，還有一個在文件中添加代碼的方式：

在.electron-vue/webpack.renderer.config.js和.electron-vue/webpack.web.config.js文件中都添加下面的代碼：

然后重新運行就可以了，這樣就可以開始做簡單的項目了