vue3+electron开发桌面软件入门与实战（1）——创建electron+vue3主体项目

中二少年学编程

已于 2022-10-13 23:14:33 修改

阅读量8k

点赞数 11

分类专栏： electron桌面端文章标签： electron vue.js javascript

于 2022-10-09 21:23:20 首次发布

本文链接：https://blog.csdn.net/zjsj_lize/article/details/127232420

版权

electron桌面端专栏收录该内容

33 篇文章 40 订阅

订阅专栏

electron系列文章目录

文章目录

electron系列文章目录
复习
一、构建项目以谁为主
二、创建项目
三、electron中运行vue项目
- electron增加窗口显示
- electron中运行vue项目
总结

复习

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

一、构建项目以谁为主

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

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

二、创建项目

1.使用vite创建vue项目

听我的，别直接用windows自带的cmd操作，不好用，不好看，还有可能上下键失灵。IDE集成的终端不香吗？
随便找个地儿创建我们的项目文件夹，使用什么IDE不重要，操作都一样，以webstorm为例，先随便打开我们平时放项目的文件：
在这里插入图片描述
注意下面的路径“D:\cnde”和我们打开的文件夹是否一致，不一致的话重新打开一个新的终端。

文件、路径都没问题了，撸代码，在终端输入如下命令初始化项目：

 npm init vite

根据提示维护自己项目的信息，我们这次项目名为“electron-vue-basiccc”，创建的是vue项目，使用的js版本，是否用ts看自己项目需求。
在这里插入图片描述
创建后，命令行启动项目：

npm install 
npm run dev

如果网络通畅，应该可以看到下图：
在这里插入图片描述
打开图中的地址，正确显示网页说明vue3项目创建成功。
因为我用的webstorm，这样创建的项目默认创建了.vscode文件，删掉就好。

2.vue项目中下载electron

下载命令：

    npm i electron -D
    // 或者 yarn add electron -D ;下载总是出现不知名错误，很可能是网络环境问题，直接用手机流量下载。
    //因为上一步运行了项目，记得下载前先关闭运行的vue项目，否则报错没有权限。

一定要看看package.json，有没有把electron加载到devDependencies，否则会拖累最终打包的大小。

3.定义入口文件

因为vue项目的默认入口文件是index.html，eletron项目的默认入口文件是main.js，所以这里我们就要解决两个框架搭配时，以哪个文件为入口。

这个问题的答案可能很简单，但是其实体现的是vue和electron的关系。如果你仔细阅读electron官网并思考过，应该已经理解electron项目运行时，相当于是一个壳，壳里面集成了nodejs、v8引擎等必须的环境。而vue项目则像是安装在壳里面，专职负责显示的一个前端项目，针对整个项目而言，vue其实只是其中的一部分，所以自然要以electron的main.js为入口。

我们参照上章的electron文档目录，手动在本vue项目中创建文件，没错，就是把上一章项目中electron整个复制过来：
在这里插入图片描述
然后在package.json配置入口：

 "main": "electron/main/main.js",

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

"start": "electron ."

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

"type": "commonjs"

此时运行electron：

yarn start

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

三、electron中运行vue项目

electron增加窗口显示

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

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

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600
    })

    win.loadURL('http://127.0.0.1:5173/')
    // win.loadFile('index.html')

}
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

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

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

    win.loadURL('http://127.0.0.1:5173/')
    // win.loadFile('index.html')

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

你把百度的网址放上去，如： win.loadURL('https://www.baidu.com/')，你的软件就是个百度客户端了

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

electron中运行vue项目

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

第一步，先“yarn dev”运行vue项目，拿到vue运行的地址： http://127.0.0.1:5173/（不同的同学，后面端口可能略有差别）
第二步，把这个地址放到main.js中：win.loadURL(‘http://127.0.0.1:5173/’)
第三步，“yarn start”运行electron项目。得到下图说明vue+electron运行成功：

在这里插入图片描述

总结

本文主要讲解了vue3项目创建，electron项目创建，以及如何通过链接的方式关联两个项目。但是这种方式只适合开发环境下使用，并不适合部署打包。

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