electron-vue+element-ui构建桌⾯应⽤
最近需要⽤Node.js做⼀个桌⾯的应⽤，了解到electron可以⽤来做跨平台的桌⾯应⽤，⽽vue可以⽤来作为界⾯的解决⽅案，研究了⼀会⼉如何把他们两个整合到⼀起使⽤，遇到了各种问题⽽放弃，毕竟作为⼀个⾮前端开发⼈员我的⽬的就是看这个东西能不能满⾜我的需求，⽽不想浪费太多的时间在上⾯，后来⼜看到了electron-vue，顾名思义就是将electron和vue整合到了⼀起直接使⽤，于是开始尝试搭建基于electron-vue的项⽬。
整个搭建过程对⾮前端开发来说还算可以，只是后⾯踩了两个坑费了⼀些时间，感觉应该⼤部分⼈都会遇到，因为我的⼀切步骤基本都是在官⽅⽂档的指导下完成的，如果出了问题那么很⼤可能是框架固有问题
根据官⽹给出的⽅法安装Node：
curl -sL desource/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（）的⽅式来安装
获取cnpm：
npm install -g cnpm --registry=registry.
接下来就像使⽤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 什么⿁，我还什么都没动呢，进程没有被定义？于是⼜去了解了⼀下主进程和渲染进程的知识，⼤概研究了⼀下放弃了，有点浪费时间⽽且直觉告诉我不是这个问题
可以看到报错信息到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 (!v.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
/
* eslint-disable no-new */
new Vue({
components: { App },
router,
store,
template: '<App/>'
}).$mount('#app')
electron vue教程去src/renderer/components/LandingPage.vue中开始体验element-ui，直接把element-ui上的⽰例代码复制过来运⾏，结果发现⼀个很诡异的事情，el-table这个表格组件好像很特殊！它怎么都显⽰不出来，除了它以外其他的控件都能正常显⽰
根据electron-vue作者⾃⼰的回复，element-ui需要加⼊到⽩名单⾥⾯，需要修改.fig.js
将：
let whiteListedModules = ['vue']
修改为：
let whiteListedModules = ['vue', 'element-ui']
然后表格控件就正常显⽰了！
在.fig.js和.electron-vue/fig.js⽂件中都添加下⾯的代码：
然后重新运⾏就可以了，这样就可以开始做简单的项⽬了
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论