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文件中都添加下面的代碼：

而後從新運行就能夠了，這樣就能夠開始作簡單的項目了