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

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

• Icons 图标库

• ucharts 图表库

• Proxy 请求代理

• Bundle Analysis 包分析

• Dark Mode 暗黑模式

• Mock

未来计划增加以下功能：

• 函数式弹窗

• 自定义tabbar

• js 模板

• uni-app x 模板

• 小程序登录 真实接口

• 小程序静默登录

• 几个 登录 页面

• 几个 个人中心 页面

unibest 在线文档地址：codercup.github.io/unibest-doc…

全文完，撒花~

第一次看到 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 )

看着曲线，平均每天 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 在线文档地址：codercup.github.io/unibest-doc…

unibest github 地址：github.com/codercup/un…

unibest gitee 地址：gitee.com/codercup/un…