前言
由于毕设可能要写界面，所以之前一直在琢磨用啥写（其实我啥也不会），写界面有很多种可选的实现途径，我选择的是其中比较相对比较简单（至少比Qt简单）的以一种来写，那就是Vue+Electron，利用脚手架VueCLI以及插件，可以快速的搭建出一个demo项目，并且愉快的进行后续开发了，其实半年之前有用过这玩意儿做过一个大作业的界面，写的很简陋，然后经过考研半年复习时间，已经全还回去了 。现在终于考完研了，打算再学学为毕设做做准备，重新再弄的时候踩了不少坑，现在被关在宿舍没啥事，就特意把这个过程记录一遍。
预备条件
安装好nodejs，安装教程网上很多，可以自行参照，完成之后在cmd中输入node -v和npm -v，能打印出版本号即可。同时由于国内访问npm默认源可能比较慢，可以考虑换源或者安装cnpm，也可以选择yarn作为包管理工具。总之，npm、cnpm、yarn三个选一个就行。参考下图：
安装Vue-CLI脚手架
它是Vue官方推出的脚手架，可以帮助我们快速搭建一个基础Vue项目，具体说明可以参考官方文档，其实写的很详细了，我这边其实就是自己参照官方文档操作的一个记录吧。
首先需要全局安装Vue-CLI，使用下面命令之一即可：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
# OR
cnpm install -g @vue/cli
安装完成之后如下，输入vue --version，如果正确输出版本号的话就说明安装成功了
快速搭建一个基础项目
先cd到你打算存放项目的目录，然后执行以下命令创建项目：
vue create hello-vue
##这里hello-vue可以自定义，表示项目名
然后可以选择官方提供的基于Vue 2或者Vue 3的模板，也可以选择自定义，这里就以Vue 3为例子，然后会让你选择包管理工具，我这里选择的是yarn，npm肯定也可以，看你自己喜好，选择完成后等待项目创建即可，完成的界面如下：
项目创建好之后，按照上图中的蓝色命令依次执行即可，效果如下：
可以看到项目正在下方的链接中运行，在浏览器中预览如下：
至此，一个非常简单的Vue项目就创建完成了
文件结构简介
用vscode打开该项目，项目的文件结构如下：
各个目录的功能介绍如下表：
| 目录 | 说明 |
|---|---|
| node_modules | 第三方依赖，我们安装的各种依赖都在个文件件里面 |
| public | 存放公共资源的地方，里面有一个index.html |
| src | 源代码文件夹，大部分开发都在这个文件夹进行 |
| src/assets | 存放一些静态资源，css、img、js、font等 |
| src/compoments | 自定义公共组件的文件夹 |
| App.vue | 首页组件、默认组件 |
| main.js | 入口文件，程序从这里开始运行 |
| .gitignore | 配置git忽略的文件或者文件夹 |
| babel.config.js | 一些预设 |
| package.json | npm的配置文件 |
关于yarn.lock文件，官网的解释如下：
Managed by Yarn
Your yarn.lock file is auto-generated and should be handled entirely by Yarn. As you add/upgrade/remove dependencies with the Yarn CLI, it will automatically update your yarn.lock file. Do not edit this file directly as it is easy to break something.Current package only
During install Yarn will only use the top-level yarn.lock file and will ignore any yarn.lock files that exist within dependencies. The top-level yarn.lock file includes everything Yarn needs to lock the versions of all packages in the entire dependency tree.
所以一般不动它就好了。
如果你是自定义创建的项目，比如加入了router，那可能文件夹下还不止上述文件，一般百度一下文件名都有详细解释，这里不再赘述。
Vue+Electron结合
前面新建的项目只能运行在浏览器中，只能算得上是一个Web应用，如果想将其变成桌面端应用，就得借助Electron了，Electron允许开发者利用前端开发技术开发桌面端应用，并且具有跨平台的特性，大名鼎鼎的vscode就是基于这个框架开发的。Vue CLI中也有插件帮助我们快速搭建Vue+Electron应用，接下来是具体流程。
安装插件
cd到项目所在文件夹，执行如下命令：
vue add electron-builder
执行后会让你选择Electron的版本：
选择完成后等待一会就安装成功了：
此时打开package.json文件，会发现里边多了几个脚本
执行以下命令之一（视你的包管理工具而定）：
yarn electron:serve
# OR
npm run electron:serve
等待一会，就会弹出应用界面
可以看到，这个应用其实就是一个浏览器，但它不是传统意义上的浏览器，它是借助谷歌内核工作的，有了右边的开发工具，也有利于我们在开发时进行调试，查看报错信息等。
注
如果运行yarn electron:serve卡住或失败的话，一般是因为下载一个Vue Devtools导致的，此时可以打开项目下新增的background.js，它就是Electron的主进程，通过查看package.json可以发现，现在整个项目的入口文件已经变成了background.js，它是控制Electron应用运行最核心的文件。
找到background.js的如下代码：
可以看到在Electron应用准备好之后，就会调用这个方法，该方法会尝试下载安装VUEJS3_DEVTOOLS，这一步如果网络不太好的话会卡很久，所以可以将该方法注释掉，或者修改代码如下即可：
app.on('ready', async () => {
if (!isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS3_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
总结
至此，VUE+Electron项目搭建工作就完成了，中间还遇到了nodejs版本的问题，最开始我安装的是12.8的版本，然后我安装electron-builder的时候它会报错说版本不匹配，要求node版本号大于等于14.0，这种情况卸掉原来的nodejs重装就行了，下载链接Node.js Mirror
