「Electron跨平台桌面应用开发 8」引入前端框架Vue.js 3

本章主要内容

引入前端框架Vue.js来创建Electron应用。


一 相关介绍

Vue.js 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

如果你想在深入学习 Vue 之前对它有更多了解，可以访问官方网站 https://v3.cn.vuejs.org/

Vite

Vite是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

Vite官方中文文档 https://cn.vitejs.dev/。

当开始想用vue去开发一个桌面应用时，有如下两种现成方案：

• electron-vue： 该项目集成度较好，封装较为完整，中文搜索下来文章较多也是该方案，可以直接上手去使用。但是，问题在于其内置electron的版本太低，笔者写文章时看到的版本是2.0.4，而最新的electron版本是18.0.x。
• Vue CLI Plugin Electron Builder： 该方案是集成到到vue-cli中使用，使用vue add electron-builder后可直接上手，免去了基础配置的步骤。但是其只能在vue-cli下使用，无法配合vite来使用。

因此，若要使用vite和electron，需要手动配置，也可以使用 Awesome Vite （https://github.com/vitejs/awesome-vite#templates）仓库的 社区维护模板中的Electron相关模板。社区模板中有很多更新及时的，也有一些类似断更的，或者是elelctron版本很低，大家可以通过察看package.json中各种技术的版本号来进行辨别。

本章中我们就一步一步自己手动配置，也可以加深对Electron框架的了解。


二 创建第一个vite项目

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

我们可以直接执行命令：

npm create vite@latest然后按照提示操作即可。下图是执行该命令后的效果：

大家可以看到，vite是支持很多前端框架的，而不仅仅是vue。这里我们选择vue继续就行了。

在这里笔者推荐直接通过附加的命令行选项直接指定项目名称和你想要使用的模板，这样就省去选择的步骤。运行下面的命令：

// 注意：npm 7+以后, 需要加上额外的双划符号:npm create vite@latest my-vue-APP — –template vue

*注：my-vue-app是你项目的名称。

然后根据提示执行相关命令，首先进入项目目录，然后安装相关依赖，最后启动项目。

cd my-vue-appnpm installnpm run dev在运行命令敲下的一瞬间，几乎是已经在运行了，不愧是vite。此时按照输出，打开地址预览，即可看到初始化页面。

注：在Visual studio code中按住Ctrl键然后单击链接就可以直接在默认浏览器中打开目标链接。

现在的项目目录看起来是这样子的：

三 引入Electron

1 安装electron

npm i -D electron

安装完后的package.json如上所示。

2 修改vite的配置文件vite.config.js

import { defineConfig } from ‘vite’import vue from ‘@vitejs/plugin-vue’import path from ‘path’;// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  base: path.resolve(__dirname, ‘./dist/’)  // vite编译后的目标目录})3 在src目录下创建background.js：

const { app, BrowserWindow } = require(‘electron’);functiоn createWindow () {  const win = new BrowserWindow({    width: 800,    height: 600      });  win.loadFile(‘dist/index.html’);  // 此处加载的是vite编译后的首页}app.whenReady().then(() => {  createWindow();  app.on(‘activate’, () => {    if (BrowserWindow.getAllWindows().length === 0) {      createWindow();    }  });});app.on(‘window-all-closed’, () => {  if (process.platform !== ‘darwin’) {    app.quit();  }});4修改package.json，新增程序的入口”main”: “background.js”，新增electron的运行命令”start”: “electron .”。

{  “name”: “my-vue-app”,  “private”: true,  “version”: “0.0.0”,  “main”: “background.js”,  “scripts”: {    “dev”: “vite”,    “build”: “vite build”,    “preview”: “vite preview”,    “start”: “electron .”  },  “dependencies”: {    “vue”: “^3.2.25”  },  “devDependencies”: {    “@vitejs/plugin-vue”: “^2.3.0”,    “electron”: “^18.0.1”,    “vite”: “^2.9.0”  }}
四 运行

在终端输入命令：

npm run buildnpm start运行后的效果：

五 写在最后

这里还是有很多可以改进的地方的，比如热更新。本章在这里主要是为了让读者了解vite和electron运行的基本流程。