2022年最新Vue+electron项目创建
一、前言
大多数文章都停留在electron-vue中，但是这个库不怎么更新了，最近的更新是九月前，看了很多文章都换其他的工具来构建了，这里推荐GITHUB一个大佬写的基于vue-cli的插件，构建项目非常简单！
插件的GITHUB源代码
话不多说，开始创建项目！
二、环境说明
首先确保你的Node、vue-cli、cnpm安装好，具体安装可以查看官网。
需要：
- Node环境，我的是16.x版本
- vue-cli3 或者4
- cnpm
三、创建项目
找一个空白文件夹，在文件地址栏处，输入cmd，就会在当前文件夹打开cmd，当然按住shift键，然后鼠标右键也可以一样的打开powershell。
输入vue ui， 这里我使用vue自带的构建项目的工具会自动打开一个网页
按照步骤来构建项目就行，这里我选择vue2.
1.点击创建项目
2.命名项目、选择你的包管理工具
3.选择手动配置
4.勾选你需要的东西，这里我多选了路由和vuex
5.最后就是选择你的vue版本和下面那个我随便选的
6.添加electron插件
创建完项目后，进入项目然后再插件管理中选择添加插件
查询：electron-builder，安装一下就好了
当然如果你是命令行操作的，直接vue add electron-builder安装就行了
四、运行项目
在项目根目录下，打开cmd或者vscode编辑器
若项目调试运行下述代码：
vue-cli-service electron:serve
若项目打包成exe运行下述代码：
npm run electron:build
然后这里可能会报错，会说你的electron安装不正确，请删除node_modules文件夹下的electron，这时候直接去删了，然后用cnpm安装electron就能解决
cnpm install electron --save-dev
注意事项
如果出现了报错，但是乱码的话，这个是因为你的cmd没有设置utf-8，在根目录下打开package.json，找到然后electron:build和electron:serve修改为下述代码：
"electron:build": "chcp 65001 && vue-cli-service electron:build",
"electron:serve": "chcp 65001 && vue-cli-service electron:serve",
65001就是utf-8的编号，到此继续运行就能启动啦！：
vue-cli-service electron:serve
结果：
更多详细操作可以查看作者写的文档，也可以直接访问github（见前言）：
文档链接
五、使用Node.js
在项目跟目录创建一个vue.config.js文件，写入代码：
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
}
然后在对应的Vuex文件中导入fs文件模块，使用即可，非常方便！
import fs from 'fs'
最后
深知大多数初中级Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则近万的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《Java开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
小编已加密：aHR0cHM6Ly9kb2NzLnFxLmNvbS9kb2MvRFVrVm9aSGxQZUVsTlkwUnc==出于安全原因，我们把网站通过base64编码了，大家可以通过base64解码把网址获取下来。