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

而后从新运行就能够了，这样就能够开始作简单的项目了