Vue+electron-vue跨平台桌面应用开发实战教程（一）

前言

本文将带领大家使用Vue + electron-builder 搭建桌面应用。
使用到的工具：IDEA 2021、node

---

创建项目

1.快速安装Vue项目

通过Ctrl/Command+alt+S快捷键打开idea的 Settings（设置）页面，在左侧目录 Plugins（插件）中搜索 Vue。博主这边已经安装过，未安装的小伙伴可以点击Install ，为以后创建Vue项目，省了很多时间。

接下来直接新建项目，在JavaScript中选择Vue.js，点击下一步（Next），输入自己预设的项目名（Project name），点击完成（Finish）即可。之后项目会自动生成环境，等待即可。

通过idea左下角的Terminal（终端）输入【vue -V】命令，查看Vue版本信息。

如果出现vue不是内部命令的话，
step1：配置路径
输入下面命令：
npm config get prefix
复制得到的路径信息，通过Win键+R键出现运行窗口，输入sysdm.cpl，找到高级->环境变量，
在系统变量中新建变量npm，变量值为之前复制到的路径，再在系统变量中找到path，添加%npm%,一直点击保存。
step2：安装cnpm
输入以下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
第三步（最关键！）
输入以下命令：
npm i npm -g npm i @vue/cli -g
如果还报错也没关系，继续执行下面的命令：
cnpm i @vue/cli -g
出现All packages installed (used 6ms(network 2ms), speed 0B/s, json 0(0B), tarball 0B)就是成功啦！
再输入vue -V，能正常出现版本信息就是完美成功！

2.集成electron

在Terminal（终端）输入以下命令：

vue add electron-builder

安装完 electron-builder 依赖之后，会出现选型情况，通过上下方向键选择最新版本即可。安装完成后会在src目录中生成background.js。
到此，所有的安装都已经完成。

3.运行程序

运行以下命令

npm run electron:serve

启动时间比较就，并出现以下信息

INFO Launching Electron…
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times

等待自动跳出桌面程序即可。

结尾

为精致而生，为慵懒而活