使用Electron-vue + Element UI 创建桌面应用(一)

涉及到的技术和框架

Electron-vue 安装使用 参考文档 Vue Element ui

环境要求

Nodejs

掌握技能

1.vue.js的基本使用 2.javascript的基本与使用 3.css,html的基本与使用 4.如果使用后端支撑，可以使用java springboot作为服务后端支撑前台请求（当然后端可以生产jar包，一起打包到electron应用中）

开始使用

1.安装Nodejs

2.安装Electron-vue

在window系统上选择一个文件夹 在文件夹的路径上使用cmd命令检查环境 输入cmd 查看nodejs的版本和npm的版本

# 如果你没有vue-cli的话需要全局安装 npm install -g vue-cli # 然后使用vue-cli来安装electron-vue的模板 vue init simulatedgreg/electron-vue my-project # 安装依赖 cd my-project npm install

使用以上命令创建electron-vue脚手架 如果在安装期间遇到了关于node-gyp、C++库等方面的问题的话，请参考官方文档给出的解决办法。 在安装过程中出现乱码，在cmd命令中执行CHCP 65001,将当期的cmd窗口设置成utf8编码，重复执行上面命令， 之后一次如下操作 回车确定 输入applicationId，回车确定，这里最好设置一下，会牵着到后面能不能运行起来

设置版本和描述，（可以一路回车） 使用scss

使用上下键来选中模块，然后使用空格键，取消在该项目中使用此模块。 这里不使用vuex

使用第一个为ESLint配置（第一次使用最好不适用ESLint配置）

这里不配置Karma+Mocha，根据个人需要使用

选中打包方式为第一个

之后使用`npm run dev`命令查看是否可以正常启动

如果出现上图错误时，使用npm install命令

如果出现上图错误，继续使用npm audit fix，之后再次使用npm run dev命令，如果看到下图则electron -vue环境安装成功

安装成功；

如果出现上图错误，则需要修改配置，在如下目录中找到webpack.renderer.config.js和webpack.web.config.js 在Plugins节点下的template下添加如下代码，两个文件都需要添加

templateParameters(compilation, assets, options) { return { compilation: compilation, webpack: compilation.getStats().toJson(), webpackConfig: compilation.options, htmlWebpackPlugin: { files: assets, options: options }, process, }; },

webpack.renderer.config配置 webpack.web.config.js配置 再次使用npm run dev命令启动程序，查看运行结果，基本到此已经安装完成了

安装 Element ui

在cmd窗口中使用npm i element-ui -S命令安装 修改文件添加element-ui到白名单中

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);

在Element-ui官网上找寻示例代码，添加到程序中，使用npm run dev，查看效果

最终效果如下