本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、前言

本篇主要介绍如何创建一个基于vue的electron应用。这里主要使用vue/cli和vue-cli-plugin-electron-builder，用vue脚手架主要构建vue项目基底，用vue-cli-plugin-electron-builder这个插件，主要是为了创建项目所需的electron和electron-builder依赖注入及相关插件。点击查看vue-cli-plugin-electron-builder详情

这是一套保姆级教程，大佬们可以略过。

二、构建步骤

首先我们先安装vue脚手架，脚手架进行全局安装

npm install -g @vue/cli

// 安装之后，输入 vue --version 检查是否安装成功
// 成功后会返回 @vue/cli 5.0.8

通过脚手架创建一个vue项目

// 这里你可以选择vue2 或者 vue3
vue create first-electron

创建好之后，进入项目目录（first-electron），并添加vue-cli-plugin-electron-builder插件，注意这里是用的vue脚手架。

cd first-electron

vue add vue-cli-plugin-electron-builder

在安装过程中，会让你选择electron的版本，这里选择最新的就行。

安装成功之后，就可以运行或打包了

运行项目或打包

// 运行
yarn electron:serve
// or
npm run electron:serve

// 打包
yarn electron:build
// or
npm run electron:build

以上我们就创建好了一个基于vue的electron项目，运行结果如下图。

打包可能出现的错误

在你运行打包命令时，可能会报一下错误

这是因为没有找到对应的资源文件，你可以从下面这个网址中找到electron的各个版本包。

下载地址：registry.npmmirror.com/binary.html…

在这里找到报错里面的对应版本下载下来，放到对应的目录中

// windows
    C:\Users[你电脑中用户名字]\AppData\Local\electron\Cache
// mac
    ~/Library/Caches/electron/

放好之后再打包就不会报错了，如下图。

之后我们在项目文件中就能找到dist_electron文件夹，这就是electron应用打包后默认输入的文件夹。

其中MacOS文件夹下的应用，是免安装的，可以直接打开，下面的xxx.dmg文件是安装包,可以让用户下载安装。

三、后记

以上我们就完成了基于vue构建的electron项目。大家可以在自己电脑上按照这个步骤，一步一步的安装了。就能得到自己的第一个桌面端应用啦！

下篇预告：下一篇准备给大家讲解下electron项目的一些基础配置，例如通信。

本篇完结！撒花！感谢观看！希望能帮助到你

【Electron】从零开始搭建vue+Electron应用

一、前言

二、构建步骤

三、后记