Vue+Electron我的项目搭建教程

最近写一个我的项目，须要应用Electron集成Vue，特此记录搭建过程

Vue+Electron 罕用搭建形式

在之前，通常咱们会应用electron-vue脚手架来疾速搭建，然而这个脚手架搭建的Electron版本曾经太旧了，目前github曾经一年没提交更新了，所以咱们须要应用其余新的形式来搭建。

Vue CLI Plugin Electron Builder

本教程应用Vue CLI Electron插件，疾速的搭建Electron+Vue我的项目，对于插件的信息可进入Vue CLI Plugin Electron Builder官网自行理解，上面咱们开始搭建

开始搭建

1：应用Vue脚手架创立Vue我的项目
1. 装置Vue脚手架，若已装置则能够跳过，未装置可用如下形式装置
npm install -g @vue/cli# ORyarn global add @vue/cli
2. 创立我的项目
# 下方 myproject 为我的项目名，可本人定义vue create myproject

执行之后，呈现如下选项：

其实就是默认配置和自定义配置，次要是代码查看、语言(js or ts)、路由、CSS(Scss等)等等...,我这边间接抉择default，如果有非凡需要你能够自定义设置

如图，装置实现，我这边装置的有yarn，所以vue默认用yarn作包治理了，如果你应用的npm或cnpm，应用npm run serve 运行即可

2.配置Electron

接下来就开始配置Electron了

首先进入我的项目目录
cd myproject
而后通过运行以下命令装置并调用vue-cli-plugin-electron-builder的生成器：
vue add electron-builder

如下图所示，提醒咱们抉择Electron版本，间接抉择最新9.0.0版本即可

接下来依据您的网络状况，安装时间各异，个别为15-60秒左右，装置胜利后如下提醒：

启动
如果您应用yarn（强烈推荐），则间接执行
yarn electron:serve
或者，如果您应用NPM，则执行：
npm run electron:serve

到此为止，整合结束启动胜利，整体还是比较简单的，感激脚手架大佬们的贡献者，不便了像我这样的搬砖者，向大佬们学习，向大佬们致敬！

如果您装置过程中遇到了问题，欢送留言，我看到会尽量及时回复，若有须要，接下来我会再写一遍对于Electron简略入门的教程