从零开始手把手教利用electorn+vue搭建一套客户端开发环境
针对网上electron开发框架太繁琐复杂的问题,本文从web端和electron端构建了客户端开发环境,并利用npm包工具解决多命令行开启和白屏问题。
利用 electron 开发桌面应用时,首先会遇到这么一个问题:网上很多的electron+vue开发框架太繁琐复杂,同时技术栈都比较老旧,有时候升级某个包报一堆的错误,这些错误又涉及到桌面软件开发的知识,这对于前端开发者来说无疑是噩梦。
因此,搭建一套属于自己的 electron+vue 开发框架显得格外重要,好处是我可以随意扩展和配置。
本文将从零开始利用 elelctron 和 webpack+vue3 教你如何搭建一套桌面开发环境。
开发环境组成
我们知道,利用 electron 开发客户端,页面全部都是用 html+css+js 编写,这为前端开发者开发客户端提供了可能。同时,随着 web 技术的飞速发展,在开发效率和页面效果展示方面是其他技术所不能比拟的,这也是为什么 electron 越来越火的原因。
对于今天的前端开发来说,一般使用 vue/react 框架来开发 web 页面,因此,整个开发环境架构如下图所示:
它包括两个部分:electron 和 web页面
electron:左边的 electron 可以理解为一个浏览器,本质上它是由 chromium 和 nodejs构成。choromium 提供了 UI 界面的展示, nodejs 提供操作本地电脑的能力。
web页面: 右边是用 @vue/cli 脚手架搭建的 vue 开发环境,用来创建客户端页面。
中间通过 electron 提供的接口 window.loadURL 去加载 web 页面,这样 electron 就能显示页面。
下面,我们将分别搭建这两部分。
创建web 页面
1. 安装`vue`官方脚手架
npm install -g @vue/cli
2. 利用脚手架创建项目
vue create electron-vue-demo
你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选 手动选择特性 来选取需要的特性。这里我们选择默认的就可以了。
3. 执行 npm run serve 启动界面
这样,我们就创建好了 web 页面的结构,这非常简单,跟我们开发 web 项目是一样一样的。下面将在该工程下安装`electron`,及做相关的配置。
创建 electron
1. electron 镜像设置
因为electron放在国外的服务器上,国内环境访问很慢而导致下载失败,因此需要配置镜像。找到 npm 的配置文件 .npmrc ,加入如下代码到配置文件中:
electron_mirror=https://npmmirror.com/mirrors/electron/
如果你不想设置.npmrc,可以在安装的时候直接指定镜像源,如下:
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ npm install electron --save-dev
2. 安装 electron
npm install electron --save-dev
3. 新建主进程文件main.js
const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
// 创建一个窗口来展示web页面
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 相关代码electron官网有详细的介绍
const createWindow = () => {
const config = {
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
}
}
mainWindow = new BrowserWindow({
width: 1000,
height: 600,
...config
})
mainWindow.loadURL('http://localhost:8080/')
}
4. 配置package.json
首先修改 main 字段,其路径为我们上面创建的 main.js 文件路径
{
"main": "main.js"
}
然后在 scripts 中新增加一个命令:
"scripts": {
"ele": "electron ."
}
5. 启动命令npm run ele
这样我们的 web 页面就展示在 electron 提供了客户端了。
【注意】:你需要新开一个命令行启动 electron。第一个命令行用于启动 web页面,第二个命令行用于启动 electron 。
完善开发环境
上面提到需要开启两个命令行才能启动我们的客户端,并且你要先启动 web 页面,然后才能启动 electron,这样就非常繁琐,开发起来非常不爽。下面我们将解决这个问题。
我们知道 npm 提供了一个 && 符号,它用来连接两条命令,因此我们可以这么改造:
改造前:
```js
"scripts": {
"serve": "vue-cli-service serve",
"ele": "electron ."
}
```
改造后:
```js
"scripts": {
"serve": "vue-cli-service serve",
"ele": "electron .",
"dev": "npm run serve && npm run ele"
}
```
当你执行 npm run dev 时,会首先打开一个白屏,等待一会后刷新才会出现内容。这是为什么呢?
因为,这两个命令的执行是同时启动的,而 npm run serve 的启动需要一定的时间,当 npm run ele 打开客户端时,页面根本就没有生成,所以是白屏。
还有一个问题是,&& 这个符号不是跨平台的,在 window 系统是不好使的。
问题一: 如何跨平台的同时运行两个命令?
这个问题我们可以利用一个 npm 包来解决: concurrently 。首先安装`concurrently`,关于它的使用请查看`npm`网站。
npm i concurrently --save-dev
因此,现在 scripts 就变为:
"scripts": {
"serve": "vue-cli-service serve",
"ele": "electron .",
"dev": "concurrently \"npm run ele\" \"npm run serve\""
}
现在,我们只需要执行 npm run dev 就可以同时跑两个命令了。
问题二: 如何解决白屏?
这个问题的本质是等 npm run serve 启动完成后才去启动 npm run ele 。这个我们也可以通过一个 npm 包来完成: wait-on。首先安装`wait-on`:
npm i wait-on --save-dev
然后改造 scripts :
"scripts": {
"serve": "vue-cli-service serve",
"ele": "electron .",
"dev": "concurrently \"wait-on http://localhost:8080/ && npm run ele\" \"npm run serve\""
}
wait-on http://localhost:8080/ && npm run ele 这段代码的意思是等待http://localhost:8080/启动完成后,再启动 npm run ele ,这样白屏问题就得到解决了。
通过上面的两个问题我们发现,npm 上有很多小工具是非常实用的,这些小工具是可以运用在你的项目中的。
总结
本文通过创建 web 页面和创建 electron 两部分搭建了一个完整的 electron+vue 的桌面端开发环境。
通过两个 npm 的小工具 concurrently 和 wait-on 解决多开启多个命令行运行和白屏的问题,这让开发更加简单快捷。
更多推荐
所有评论(0)