electron系列文章目录

1. vue3+electron开发桌面软件入门与实战（0）——创建electron应用
2. vue3+electron开发桌面软件入门与实战（1）——创建electron+vue3主体项目
3. vue3+electron开发桌面软件入门与实战（2）——创建electron+vue3框架打包集成

文章目录

• electron系列文章目录
• 复习
• 一、构建项目以谁为主
• 二、创建项目
• • 1.使用vite创建vue项目
  • 2.vue项目中下载electron
  • 3.定义入口文件
• 三、electron中运行vue项目
• • electron增加窗口显示
  • electron中运行vue项目
• 总结

复习

前面已经简单介绍如何创建一个比官 更简单的electron应用，如果时间充裕，还是建议以官 为主，本系列为辅，快速学习electron。
为什么上一篇文章简单到连页面都没有，因为我们的目标是vue3+electron，写啥页面，直接从vue3开始！

一、构建项目以谁为主

如果你已经对打包工具很熟悉，前端工具三千，耍起来，在你眼里也无非是配置页面的一个小小单词，那就不用纠结以谁为主的问题了，姿势随意，舒服就好。

如果你和刚接触vue时的我一样，还在无脑跟着官 敲命令行，请以vue3为主创建项目，也就是说上一篇文章创建的项目可以扔了。
下面跟着我一起从vue3入手，创建一个vue3+electron的项目。

二、创建项目

1.使用vite创建vue项目

听我的，别直接用windows自带的cmd操作，不好用，不好看，还有可能上下键失灵。IDE集成的终端不香吗r> 随便找个地儿创建我们的项目文件夹，使用什么IDE不重要，操作都一样，以webstorm为例，先随便打开我们平时放项目的文件：

如果 络通畅，应该可以看到下图：

在scripts标签下配置electron的启动命令

这时候如果直接运行start，electron大概率会 错：Error [ERR_REQUIRE_ESM]: require() of ES Module。
这是因为vue项目默认采用的是ES6的模块化，而electron基于nodejs，nodejs的模块化还是commonjs，所以我们需要找到package.json中的type标签，修改为：

此时运行electron：

发现控制台打印出“hello world”，说明electron部署成功。
至此，我们在同一个项目中成功运行了vue项目和electron项目，不过这两个项目目前是割裂开的，我们下一步需要做的就是如何让两个项目搭配运行。

三、electron中运行vue项目

electron增加窗口显示

一个桌面端软件，最起码也得有个窗口吧。

把electron的main.js改造一下，上代码：

BrowserWindow：electron提供的对象，可以实例化得到一个窗口对象。
app：electron提供的模块，管理着软件的生命周期，提供了很多钩子。

上面代码很简单，就是把官 给的示例凑一起了，省了大家试错的成本，更细致的学习请移步官 。和官 唯一的区别就是这两行代码：

官 提供的例子是一个静态页面，所以可以直接通过loadFile显示相应的页面，而我们的vue是一个需要编译的项目，vue的index.html在不编译的情况下，比脸还干净。所以我们需要用loadURL的方式，把编译后的vue项目地址拿过来。

嵌入百度的图片违规了，自行尝试吧。

electron中运行vue项目

和上面同样的道理，我们按步骤运行：

1. 第一步，先“yarn dev”运行vue项目，拿到vue运行的地址： http://127.0.0.1:5173/（不同的同学，后面端口可能略有差别）

2. 第二步，把这个地址放到main.js中：win.loadURL(‘http://127.0.0.1:5173/’)

3. 第三步，“yarn start”运行electron项目。得到下图说明vue+electron运行成功：

总结

上大部分教程讲到这里其实就已经完结了，后面无非是多丰富一些工具，因为两个项目之间完全靠一个链接关联，两边怎么搞都不影响对方。但是实际项目中这样真的可以吗，甚至一些培训机构都是在教人怎么用地址链接关联electron。
难道一个真正的项目中，你都上桌面端了，给人家软件的时候，还要说等5分钟，vue还没部署好……
这种靠链接关联的方式适合开发环境使用，并不适合打包部署。如何通过vite，把vue和electron合理部署并打包成exe安装包，以及适配linux国产化环境，才是我们后面文章讲解的方向。

文章知识点与官方知识档案匹配，可进一步学习相关知识Vue入门技能树首页概览23895 人正在系统学习中