electron-vue项目的搭建【vue2+element-ui】

别再说你不会桌面应用了

快速创建Electron-vue初始化项目

vue init simulatedgreg/electron-vue my-project

然后回车回车回车

打开创建好的项目 按照普通的vue项目 进行npm install/i 进行依赖安装

在运行项目中 会出现以下几个错误

1， Identifier 'tasks' has already been declared

找到 .electron-vue/build.js 文件

修改代码，修改其中一对的tasks变量名，需要注意的是本文件中一共包含四个tasks, 修改的时候注意不要改错

修改前

const tasks = ['main', 'renderer'] 
const m = new Multispinner(tasks, { preText: 'building', postText: 'process' })

修改后

const tasks1 = ['main', 'renderer'] 
const m = new Multispinner(tasks1, { preText: 'building', postText: 'process' })

在项目中使用element-ui

在项目中 npm i element-ui -S安装element-ui

然后找到项目文件webpack.renderer.config.js

找到文件中 let whiteListedModules = ['vue']

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

在项目目录/src/renderer/main.js中添加Element-ui ,代码如下

import Vue from 'vue'; //原有代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; //原有代码

Vue.use(ElementUI);

按照我这套流程来，你已经精通electron-vue 桌面应用了,