![uniapp](https://img.kuizuo.cn/uniapp.png)

最近想搞个移动端或小程序的 Vue3 项目，所以选择跨端开发平台就显得十分重要。在业内主要有两个跨端开发平台，Taro 与 uniapp，但 uniapp 貌似对 vue3 的支持不是特别友好。所以让我在 Taro 和 uniapp 之间抉择了一段时间，最终还是尝试选择相对熟悉的 uniapp 来进行开发。

:::warning 前排提醒：目前 uniapp 对 Vue3 的支持还处于 alpha 版，即开发阶段，大概率是会遇到很多问题的。

:::



## 开发环境搭建

建议安装 HBuilderX，主要是 uni cli 在 APP 平台仅支持生成离线打包的 wgt 资源包，不支持云端打包生成 apk/ipa，并且也不便配置一些打包后的参数。

这里建议安装 Alpha 版，后文会说明缘由。

:::warning 注意

在 HBuilderX 正式版中是无法直接创建 Vue3 项目的，而 Alpha 版有 Vue2 和 3 可供选择，但创建的自带的模板大部分的写法还是 vue2 的写法（无 setup 语法糖），所以这时候要么改代码自建，要么使用官方所提供的 [Vue3 模板](https://uniapp.dcloud.io/worktile/CLI.html#%E5%88%9B%E5%BB%BA%E5%B7%A5%E7%A8%8B)

![image-20220327000608783](https://img.kuizuo.cn/image-20220327000608783.png)

:::

```bash
# 创建以 javascript 开发的工程
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

# 创建以 typescript 开发的工程
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project
```

当然，有可能会下载失败，可以直接访问 [gitee](https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip)下载模板。

## 项目结构

```
|-- src
	|-- App.vue
	|-- env.d.ts
 	|-- main.ts
 	|-- manifest.json
  	|-- pages.json
 	|-- uni.scss
 	|-- pages
 	|   |-- index
 	|       |-- index.vue
  	|-- static
 		|-- logo.png
|-- index.html
|-- package-lock.json
|-- package.json
|-- postcss.config.js
|-- tsconfig.json
|-- vite.config.ts
```

下载完毕，开始安装依赖，接着就可以开始测试了。

## 运行编译

在运行之前，首先将**vuex**包给移除，不然将会有如下提示，总之就是不推荐使用的意思，而且要使用状态管理也推荐使用 pinia。所以执行 `yarn remove vuex` 吧

```
(node:26968) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at F:\Uniapp\my-vue3-project1\node_modules\vuex\package.json.
Update this package.json to use a subpath pattern like "./*".
```

### H5

运行编译都正常

### APP

使用`npm run dev:app`后就会发现，终端一直卡在如下界面无法继续。（后面测试发现，除了 H5 能正常运行，其他都会卡住）

```
编译器版本：3.4.3（vue3）
请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式
。
正在编译中...
vite v2.8.6 building for development...
DONE  Build complete. Watching for changes...
ready in 1554ms.
```

然后呢？？？

算了，就用 HBuilderX 的 cli 先运行到手机或模拟器，然后后打开 app 的时候提示如下错误，点击忽略后发现应用无法正常运行。

![image-20220326224649953](https://img.kuizuo.cn/image-20220326224649953.png)

查看了下我本地的 HBuilderX 版本是正式版 v3.3.13，而该 Vue3 的模板的 Alpha 版 v3.4.3

![image-20220326225748608](https://img.kuizuo.cn/image-20220326225748608.png)

好家伙，官方提供的模板都直接使用 Alpha 版，无奈只好点击 [查看详情](https://ask.dcloud.net.cn/article/35627) 后问题解决办法。最终测试后，建议是使用最新版，即 Alpha 版本，于是替换了本地正式版的 HbuilderX，应用便能正常运行了。

既然开发环境下能正常运行，那就试下打包。由于 uniapp 打包安卓应用只能打包成 APP 资源，要打包成 apk，要么创建一个 Android Studio 工程，然后将 APP 资源放入并打包成 apk，要么使用云打包（而云打包又是只有 HBuilder 才有的功能）。如果本地没有 Android Studio 相关环境，建议还是使用云打包（简单方便），这里就不演示下打包过程了。

### 小程序

这里只测试了微信小程序，在上面 app 的处理完之后，微信小程序也是正常运行，不过至于与上面 Vue3 模板和 HbuilderX 正式版有无关系我就不得而知了，也懒得重装测试了。不过猜测应该与上面无关，毕竟是与手机的 SDK 有关。

## 组件库

uniapp 官方中提供了一个 uni-ui 的组件库，但有一个 uniapp 相对知名的组件库 uview，并且相对前者来说更易上手实用，但当我尝试用 HBuilderX 导入时，却出现下方提示。

![image-20220327002827115](https://img.kuizuo.cn/image-20220327002827115.png)

很显然，uview 并不支持 vue3，但在社区中找到了份同时支持 Vue3.0 和 Vue2.0 的[uView](https://ext.dcloud.net.cn/plugin?name=vk-uview-ui)，但测试后最终已失败告终。

在社区中也搜到了 [ThorUI 组件库](https://ext.dcloud.net.cn/plugin?id=556) 但貌似需要会员收费，果断放弃且没有测试。

然后想到 Taro 中还有 nutui，于是我便开始尝试了一下，不出所料，支持 Vue3 组件库，肯定是支持的。演示如下

![image-20220327005629618](https://img.kuizuo.cn/image-20220327005629618.png)

但很遗憾，这里的支持也只是局限于 h5 开发。官方也有声明只能开发 h5

> @nutui/nutui@next 基于 Vue3 视觉风格 JD APP 10.0 规范 ，只能开发 h5 @nutui/nutui-taro 基于 Vue3 视觉风格 JD APP 10.0 规范 ，必须基于 taro + vue3 框架 进行开发多端（多端指一套代码 部署多端环境 微信小程序 h5、等第三方小程序）

而且想要多端开发，也必须基于 taro + vue3 框架，所以在 uniapp 上的 app 与小程序上自然无法运行（已测试）

所以说一开始在 uniapp 和 taro 中的选择中，为啥不使用 Taro 呢？而且还支持 Vue3（相比 uniapp 而言）？

最终组件库的选择是 uniapp 官方的 uni-ui。

## 使用 VSCode 开发

HBuilder 给我代码编写体验并不友好，所以将 uniapp 的项目转 vscode 进行开发，并且使用到 npm 包。

首先创建一个 vite+vue3 项目（或者使用一开始介绍的官方提供的 Vue3 模板，主要是有 cli，需要自行在安装），然后将原 src 目录给删除，替换成 uniapp 创建的项目根目录。但还需要做以下操作

### 安装 sass

vite 要支持 sass 只需要安装 sass 的依赖即可

```bash
npm install sass
```

### 允许 js 文件

由于使用了 ts，如果项目中存在 js 文件，将会警告，可以在 tsconfig.json 中添加`"allowJs": true`即可

### 组件语法提示

```bash
npm i @dcloudio/uni-helper-json @types/uni-app @types/html5plus -D
```

但发现对于 uni-ui 组件库的代码提示并不友好，大概率是需要局部引用组件，我这里并未使用[npm 包](https://www.npmjs.com/package/@dcloudio/uni-ui)的方式导入，而是采用官方的 uni_modules，不过组件库的代码提示的问题不是很大，查阅文档即可解决。

### 导入代码块

[uni-app 代码块（vscode） (github.com)](https://github.com/zhetengbiji/uniapp-snippets-vscode)

### 找不到模块“./App.vue”或其相应的类型声明

在 src 目录下创建`env.d.ts`文件，填入以下内容即可

```typescript
/// <reference types="vite/client" />

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}
```

然后就是把一些`#ifndef VUE3`不是 vue3 的代码块，以及部分 js 文件改写成 ts 文件即可。这里把我修改后的模板上传到 github 上，有需要的可自行下载：[kuizuo/vite-vue3-uniapp (github.com)](https://github.com/kuizuo/vite-vue3-uniapp)

如果不想使用官方的 vue3 模板，这里也有篇文章介绍如何迁移

[迁移 HbuilderX 的 uniapp 项目到主流的前端 IDE 开发（支持 VS Code 等编辑器/IDE）](https://zhuanlan.zhihu.com/p/268206071)

不过最终如果要在 app 或小程序端运行，还是得打开 HBuilder。

## 总结

整个过程下来，其实还是 uniapp 对 Vue3 支持不够友好，加上生态没能及时更新。并且官方提供的 Vue3 模板也存在一定问题。

但最终还是使用 uniapp 来进行开发，一是对 Vue3 足够了解加上使用过 uniapp，二是 Taro 对 Vue3 是支持了，但是又该如何编译成 App 这是我主要需求的，最主要还是不想踩一遍 Taro 的坑了。

vite+vue3搭建uniapp开发环境

由于原淘宝 npm 域名（**http://npm.taobao.org 和 http://registry.npm.taobao.org**）将于 **2022.06.30 号正式下线和停止 DNS 解析**，不妨提前修改镜像的地址，以免受到影响。

域名切换规则：

- http://npm.taobao.org => http://npmmirror.com
- http://registry.npm.taobao.org => http://registry.npmmirror.com

同时不推荐使用镜像下载依赖，因为有可能会导致与官方包不同步（亲测，就因为下载依赖折腾了一晚上，还以为是电脑问题），但有时候开启科学上网（或者没有），下载也不见得特别快，所以这时候才会使用国内镜像。

## 镜像站点

[npmmirror 中国镜像站](https://www.npmmirror.com/)

http://registry.npmjs.org

## 单次使用镜像

```bash
npm install [name] --registry=https://registry.npmmirror.com
```

## 永久配置镜像

```bash
npm config set registry https://registry.npmmirror.com
```

## 查看镜像

```
npm get registry
```

## nrm镜像管理工具

```
npm install nrm -g
```

### nrm ls 查看所有镜像

```
  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
```

### nrm use 镜像 切换镜像

```
nrm use taobao
```

## 清除 npm 缓存

```bash
npm cache clean --force
```

## 配置 electron 镜像

```bash
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

npm config set ELECTRON_BUILDER_BINARIES_MIRROR https://npmmirror.com/mirrors/electron-builder-binaries/
```

npm镜像配置

官网地址 [npkill](https://npkill.js.org/)

### 安装

```
npm i -g npkill
```

无需安装也可通过`npx npkill`来运行

### 使用

在指定目录下，输入`npkill`，如下结果

![image-20220610112331413](https://img.kuizuo.cn/image-20220610112331413.png)

提示该目录共存在一个 node_modules，占用空间为 584.50 MB，如果有多个 node_modules，可以通过上下键来选择。按下 SPACE（空格键）后，便会删除该 node_modules。删除结果如下

![image-20220610112447316](https://img.kuizuo.cn/image-20220610112447316.png)

该库最强大的一点是可以直接遍历你指定目录下所有的 node_modules，其效果如下。

![image-20220610113241441](https://img.kuizuo.cn/image-20220610113241441.png)

更多详细配置见官方文档。


npkill快速删除node_modules文件

之前用 electron-vue 写过一个半成品的桌面端应用，但是是基于 Vue2 的，最近又想重写点桌面端应用，想要上 Vue3+TypeScript，于是便有了这篇文章总结下具体的搭建过程。



## Vue Cli

Vue CLI 有一个插件`vue-cli-plugin-electron-builder`，可以非常方便的搭建 electron 环境。

```bash
npm i @vue/cli -g
```

```bash
vue create my-app
```

根据自己项目的需求选择对应的依赖（例如 Babel，TS，Vuex 等等）

```bash
Vue CLI v5.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No


Vue CLI v5.0.3
✨  Creating project in F:\Electron\my-app.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...
```

### 安装 vue-cli-plugin-electron-builder

[Vue CLI Plugin Electron Builder (nklayman.github.io)](https://nklayman.github.io/vue-cli-plugin-electron-builder/)

```bash
cd my-app
vue add electron-builder
```

安装过程中会提示你选择 Electron 的版本，选择最新版本即可

### 启动项目

```bash
npm run electron:serve
```

参考文章：[Electron + Vue3 开发跨平台桌面应用【从项目搭建到打包完整过程】 - 掘金 (juejin.cn)](https://juejin.cn/post/6983843979133468708)

### 坑

```
error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
```

我测试的时候，`@vue/cli-plugin-typescript`版本为`~5.0.0`，就会导致编译类型出错，将 package.json 中改为`"@vue/cli-plugin-typescript": "~4.5.15"`，即可正常运行（但还是会有 DeprecationWarning）

## Vite

上面是使用 Vue Cli 脚手架进行开发，如果想上 Vite 的话，就需要用 Vite 来构建项目，然后安装 electron 的相关依赖。

这个不是作为重点，因为很多大佬都已经写了现成的模板，完全可以自行借鉴学习，就贴几个阅读过的几篇文章

[Vite + Vue 3 + electron + TypeScript - DEV Community](https://dev.to/brojenuel/vite-vue-3-electron-5h4o)

[2021 年最前卫的跨平台开发选择！vue3 + vite + electron - 知乎 (zhihu.com)](https://zhuanlan.zhihu.com/p/424202065)

### 现成的模板

均可在 github 上搜索到

- [vite-react-electron](https://github.com/caoxiemeihao/vite-react-electron) (推荐)

- [electron-vue-vite](https://github.com/caoxiemeihao/electron-vue-vite) (推荐)
- [vite-electron-builder](https://github.com/cawa-93/vite-electron-builder)

### electron-vite 脚手架（推荐）

当然也可以使用脚手架，可选择 React 与 Vue，实际上也就是创建上面的前两个模板

```bash
npm create electron-vite
```

## 现有项目使用 electron

TODO...

## 总结

因为 Electron 本质上还是一个浏览器，无论是 Vue 还是 React 开发也好，在传统网页开发的时候都有对应的调试地址，如 [http://127.0.0.1:3000](http://127.0.0.1:3000)，而 electron 的做法无非就是开启一个浏览器，然后和正常的网页开发一样，并提供桌面端的 api 使用。

目前社区两大 Vue+Electron 的脚手架主要是[electron-vue](https://github.com/SimulatedGREG/electron-vue)和[vue-cli-plugin-electron-builder](https://github.com/nklayman/vue-cli-plugin-electron-builder)，更多 electron 的开源项目都遵循着前者的项目结构，像上面的模板也就是。

以上就是我所使用 Vue3 来开发 Electron 的环境搭建过程，总体来说从 Electron 除了应用体积过大，对于前端开发者来说是非常友好的，既然环境配置完，那么现在就可以开始好好的编写桌面端应用了。

搭建Electron+Vue3开发环境

先放一张 gif 图展示下效果

![sse](https://img.kuizuo.cn/sse.gif)

实现上面这个效果之前，先补充点前置知识

众所周知，在 HTTP 协议中，服务器无法向浏览器推送信息，可以使用 WebSocket 来实现两者双向通信。而在这里所要介绍的是 SSE（Server-Sent Events），在浏览器向服务器请求后，服务器每隔一段时间向客户端发送流数据（是单向的），来实现接收服务器的数据，例如在线视频播放，和像上面所演示的效果。

![img](https://www.ruanyifeng.com/blogimg/asset/2017/bg2017052702.jpg)

关于 SSE 标准文档 [MDN 文档](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)

### 优点

- SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
- SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
- SSE 默认支持断线重连，WebSocket 需要自己实现。
- SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
- SSE 支持自定义发送的消息类型。

## 服务器实现

### 数据格式

服务器向浏览器发送的 SSE 数据，必须是 UTF-8 编码的文本，具有如下的 HTTP 头信息。

```http
Content-Type: text/event-stream; charset=utf-8
Cache-Control: no-cache
Connection: keep-alive
```

使用 Node 实现的代码如下

```javascript
var http = require('http')

http
  .createServer(function (req, res) {
    var fileName = '.' + req.url

    if (fileName === './stream') {
      res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        Connection: 'keep-alive',
        'Access-Control-Allow-Origin': '*',
      })
      res.write('retry: 10000\n')
      res.write('event: connecttime\n')
      res.write('data: ' + new Date() + '\n\n')
      res.write('data: ' + new Date() + '\n\n')

      interval = setInterval(function () {
        res.write('data: ' + new Date() + '\n\n')
      }, 1000)

      req.connection.addListener(
        'close',
        function () {
          clearInterval(interval)
        },
        false,
      )
    }
  })
  .listen(8844, '127.0.0.1')
```

通过 node server.js 运行服务端，此时浏览器访问 [http://127.0.0.1:8844/stream](http://127.0.0.1:8844/stream) 得到的效果就是开头的 gif 所演示的。

## 客户端 API

像上面是直接向服务器请求，浏览器有`EventSource`对象，比如监听 SSE 连接，以及主动关闭 SSE 连接，具体的演示代码如下

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
  </head>
  <body>
    <div id="example"></div>
    <script>
      var source = new EventSource('http://127.0.0.1:8844/stream')
      var div = document.getElementById('example')

      source.onopen = function (event) {
        div.innerHTML += '<p>Connection open ...</p>'
      }

      source.onerror = function (event) {
        div.innerHTML += '<p>Connection close.</p>'
      }

      source.addEventListener(
        'connecttime',
        function (event) {
          div.innerHTML += '<p>Start time: ' + event.data + '</p>'
        },
        false,
      )

      source.onmessage = function (event) {
        div.innerHTML += '<p>Ping: ' + event.data + '</p>'
      }
    </script>
  </body>
</html>
```

并且由于是调用浏览器 API，在开发者工具的网络面板上还能看到对应的 EventStream，像下面这样

![image-20220316134321431](https://img.kuizuo.cn/image-20220316134321431.png)

## 参考链接

> [使用服务器发送事件 - Web API 接口参考 | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/API/Server-sent_events/Using_server-sent_events)
>
> [Server-Sent Events 教程 - 阮一峰的网络日志 (ruanyifeng.com)](https://www.ruanyifeng.com/blog/2017/05/server-sent_events.html)