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
# OR
yarn 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简单入门的教程