Electron+Vue+ElementUI开发环境搭建

环境安装

node -v
v16.1.0

npm -v
7.11.2

yarn -v
1.22.10

vue脚手架安装

npm install -g @vue/cli
npm install -g @vue/cli-init

初始化Electron项目结构

在指定的目录下，我们使用如下的命令进行electron-vue的项目初始化：

vue init simulatedgreg/electron-vue electron-vue-demo

然而，这个过程很慢，甚至卡住不动。原因是指定模板进行创建时，会拉取github上的仓库进行模板初始化，幸运的是vue提供模板离线初始化的功能。
下载模板源码：https://github.com/SimulatedGREG/electron-vue
下载后解压存放在用户目录/.vue-templates/ 下（没有就创建，注意复数s），形成如下的结构：

{home目录}/
  .vue-templates/
     electron-vue-master/（目录名随便，但是在待会儿init指定的时候需要一致）
       .github/
       template/
       ....

之后就可以使用离线（offline）模式创建：

vue init --offline electron-vue-master electron-vue-demo # 名称和上述文件夹名称一致即可

之后就是按照向导进行创建工作：

vue init --offline electron-vue-master electron-vue-demo
> Use cached template at ~\.vue-templates\electron-vue-master
​
? Application Name electron-vue-demo（项目名）
? Application Id com.compilemind（域名）
? Application Version 0.0.1（版本）
? Project description electron vue demo（描述）
? Use Sass / Scss? No（是否使用Sass/Scss编译器）
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)
axios, vue-el, ectron, vue-router, vuex, vuex-electron（插件包）
? Use linting with ESLint? Yes（启用ESlint）
? Which ESLint config would you like to use? Standard（ESLint配置）
? Set up unit testing with Karma + Mocha? No（测试模块）
? Set up end-to-end testing with Spectron + Mocha? No（测试模块）
? What build tool would you like to use? builder # 这里我们使用electron-builder构建可执行程序
? author w4ngzhen <w4ngzhen@hotmail.com>
​
   vue-cli · Generated "electron-vue-demo".

引入ElementUI

引入ElementUI相关包

npm install element-ui -S

在渲染进程模块的main.js中加入ElementUI组件

import ElementUI from 'element-ui' 
import 'element-ui/lib/theme-chalk/index.css' 
...
Vue.use(ElementUI)

完成配置后就可以进行开发了。