一、创建项目
1.1 安装vue-cli
????????先查看是否已经安装了vue-cli，vue-cli的版本是什么?
? ? ? ? 查看版本命令：vue --version
????????如果版本叫老，可以直接卸载，再安装最新版本
? ? ? ? 卸载命令：npm uninstall vue-cli -g
? ? ? ? 安装目录：npm install @vue/cli -g
1.2 使用vue-cli创建项目
????????选取一个项目存放的路径，然后开始创建项目
? ? ? ? 创建项目命令：vue create raje-rebot-front
????????这里将项目名定为：raje-rebot-front
?????????输入完上述命令之后进入vue项目的创建过程。出现以下内容
- 第一个选项是 “default” 默认(Vue3)，只包含babel和eslint
- 第二个选项是 “default” 默认(Vue2)，只包含babel和eslint
- 第三个选项是 “Manually select features”自定义安装
????????选择自定义安装，进入下一步选择
????????这里我们选择：
????????????????babel（高级的语法转换为低级的语法）
????????????????Router（路由）
????????????????Vuex（状态管理器）
????????????????CSS Pre-processors（css预处理器）
????????????????Linter / Formatter（代码风格、格式校验）
????????然后进入下一步
这步是选择vue.js使用的版本，这里选择2.x，接着进入下一步
?这步是设置router是否使用history模式，这里选择n，接着进入下一步
?这步是设置css预处理模块，这里选择 Stylus ，接着进入下一步
?这步是选择ESLint代码检查工具的配置，这里选择ESLint + Standard config，接着进入下一步
?这步是选择何时执行ESLint检查，这里选择保存时检查“Lint on save”，接着进入下一步
?这步是询问 babel, postcss, eslint 这些配置是单独的配置文件还是放在package.json 文件中，这里选择“In package.json”，接着进入下一步
这步是询问以后创建项目的时候是否也采用同样的配置，这里选择N。
到目前为止，vue项目是创建完成了，我们等待项目下载依赖包，等项目构建完毕我们开始集成electron
?1.3 使用electron-builder集成electron
进入项目根目录（raje-rebot-front），然后执行下列命令：vue add electron-builder
这步是选择Electron的版本，这里选择最新版本13.0.0，等待安装完成即可。
?安装完成后会在src目录下生成background.js，并在package.json 文件中修main为：
"main": “background.js”
至此，所有的安装都已经完成了，接下来我们就可以运行程序看效果了。
1.4 运行程序
? ? ? ? 执行运行命令：npm run electron:serve
????????在启动的时候，会启动很久，并出现以下信息? ? ?
这是在安装vuejs devtools，由于网络问题，一直安装不上，重试5次后会自动跳过并启动程序。
编译成功后，会自动弹出一个桌面程序，如下图所示
