使用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，查看效果

最终效果如下