🎉 号外，unibest 官方文档新增6个新特性 🎉🎉 号外，unibest 官方文档新增6个新特性 🎉 大家好

🎉 号外，unibest 官方文档新增6个新特性 🎉

大家好，我是菲鸽，unibest 作者，今天带给大家一篇 unibest 官方文档的介绍，新增了6个新特性。

之前的官方文档文章，传送门

Icons 图标库
ucharts 图表库
Proxy 请求代理
Bundle Analysis 包分析
Dark Mode 暗黑模式
Mock

未来计划增加以下功能：

函数式弹窗
自定义tabbar
js 模板
uni-app x 模板
小程序登录 真实接口
小程序静默登录
几个 登录 页面
几个 个人中心 页面

unibest 在线文档地址：unibest.tech

全文完，撒花~

第一次看到 unibest 的童鞋还不知道 unibest 是啥，一句话概括就是： unibest - 最好的 uniapp 跨端解决方案` --- 王婆卖瓜自卖自夸，O(∩_∩)O哈哈~

unibest 是一个 uniapp 跨端解决方案，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + VSCode(可选 webstorm) 实现。它使用了最新的前端技术栈，无需依靠 HBuilderX，通过命令行方式运行 web、小程序 和 App。(PS: App 运行和打包还是需要 HBuilderX 的)

unibest 内置了 约定式路由、layout布局、请求封装、请求拦截、登录拦截、UnoCSS、i18n多语言 等基础功能，提供了 代码提示、自动格式化、统一配置、代码片段 等辅助功能，让你编写 uniapp 拥有 best 体验（ unibest 的由来）。

想了解 unibest 的童鞋可以去我主页看看其他介绍 unibest 的文章。

历时 3 个月 unibest 已达千星（ 2024-03-30 数据：github 658 + gitee 372 = 1030 )

同类模板的 star 对比：

看着曲线，平均每天 6-7 星，到年底大概会有 3k 吧。目前项目还在不断更新，commit 很多。

下面咱们来简单说说这6个新特性。

`Icons` 图标库

通常有以下几种方式使用图标：

UI 库 Icons
UnoCSS Icons
iconfont
其他图标库

然后写了每种方式的使用方式及最佳实践。

`ucharts` 图表库

目前支持秋云图标库 ucharts 官网。

如果您已经 clone unibest 项目仓库，那么切换到 ucharts 分支即可。

如果想创建一个新的 ucharts 项目，运行下面的命令即可：

pnpm create unibest my-unibest -t ucharts

ucharts 效果图：

`Proxy` 请求代理

之前默认的后台地址只有一个，地址也是在 .env 里面进行配置的。但是如果后台地址有多个，那就不方便了。

多个后台地址时，通常有 2 个方案：

1. 编写多个 http 实例，每个实例传入不同的后台地址。
1. 使用 proxy 代理 ，将请求转发到不同的后台地址。（推荐）

这里只介绍第二种方案。

proxy 代理 又分为 本地代理 和 线上代理，分别使用 vite proxy 和 nginx 配置来完成。

本地代理

vite.config.ts 的 proxy 配置如下。

/basic-api 代表需要命中的 path，target 是请求转发到的地址，rewrite 是重写 path（下面是把 /basic-api 替换为空）。

当请求 /basic-api/user 时，实际请求的地址是 http://localhost:3000/user。

 server: {
      proxy: {
        '/basic-api': {
          target: 'http://localhost:3000',
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(new RegExp(`^/basic-api`), ''),
          // only https
          // secure: false
        },
        '/upload': {
          target: 'http://localhost:3300/upload',
          changeOrigin: true,
          ws: true,
          rewrite: (path) => path.replace(new RegExp(`^/upload`), ''),
        },
      },
      open: true, // 项目启动后，自动打开
      warmup: {
        clientFiles: ['./index.html', './src/{views,components}/*'],
      },
    },

线上代理

使用 nginx 配置代理即可。

`Bundle Analysis` 包分析

微信里面的包分析
vite 里面的包分析

可以查看每个包的大小，分析各个包的依赖关系，根据需要对依赖进行优化处理。

一些优化建议：

`Dark Mode` 暗黑模式

Dark Mode 暗黑模式

如果您已经 clone unibest 项目仓库，那么切换到 darkmode 分支即可。

如果想创建一个新的 Dark Mode 项目，运行下面的命令即可：

pnpm create unibest my-unibest -t darkmode

过程
- 1. 实现基本的 Dark Mode 样式
- 1. 结合 UI 库，一起联动，这里是 wot-ui
效果图
- TODO: write

Mock

有的时候需要模拟接口调用，但又不想搞真的后台服务，这个时候 Mock 就可以派上用场了。

这里介绍 vite-plugin-mock，它是一个基于 vite 开发的 mock 插件，同时支持本地环境和生产环境。关键是调用请求时浏览器看得到真正的请求发出，最大还原真实项目的效果，很方便调试。

后面描述了具体的引入过程和使用方式。

未来要做的登录页

即时设计官网里面找的，挺好看的：

unibest 链接地址

最后还是贴几个链接，不然你们想要的都找不到~~

文档地址：unibest.tech/ (2024年11月搞定的域名) 同一仓库生成的内容。

github 地址：github.com/feige996/un…

gitee 地址：gitee.com/feige996/un…

旧的 github: github.com/codercup/un…

旧的文档地址（留个纪念）：codercup/unibest-docs

微信交流群 因不能贴引流二维码，有需要的同学请看官方文档微信群。

🎉 号外，unibest 官方文档新增6个新特性 🎉