【unibest文档】七、UI篇UI 库篇默认 UI 库 unibest 经过几次更迭，先后使用 uni-ui、uv-

UI 库篇

unibest - 官方文档地址：unibest.tech

默认 UI 库

unibest 经过几次更迭，先后使用 uni-ui、uv-ui作为默认 UI 库，目前使用 wot-ui 为默认 UI 库。

wot-ui 是 vue3+ts 编写的全端支持的 UI 库，编码体验比 uv-ui 更好；而官方维护的 uni-ui 则样式略丑，组件较少，故弃之。

wot-ui 全称 wot-design-uni，是 wot-design 的 uniapp 版本，文档地址：wot-design-uni.netlify.app/.

UI库 变迁，请看掘金文章《unibest UI 库选型》，里面比较了几个热门 UI库 的 组件数量、github star 数量、编写语言、多端支持度 等，并最终选择了 wot-ui 。

很多群友反馈有其他 UI 库的需求，那么更换 UI 库 需要哪些步骤呢？

先卸载原有的 wot-ui 库
再安装其他 UI 库

下面我们简单描述一下更换 2 个主流 UI库 —— uni-ui + uv-ui 的过程。

当然也支持同时存在多个 UI 库，有 ES 摇树特性，不必担心打包后的体积。

卸载 wot-ui 库

卸载 wot-ui 过程如下：

1. 删除 wot-ui 库：

  pnpm un wot-design-uni

1. pages.config.ts 文件 easycom.custom 删除相关配置：

easycom: {
    autoscan: true,
    custom: {
-     '^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
    },
},

1. tsconfig.json 文件 compilerOptions.types 删除相关配置：

"types": [
    "@dcloudio/types",
    "@types/wechat-miniprogram",
-   "wot-design-uni/global.d.ts",
    "./components.d.ts",
    "./global.d.ts"
]

安装 `uni-ui` 库

1. 安装 uni-ui 库：

pnpm add @dcloudio/uni-ui

1. pages.config.ts 文件 easycom.custom 添加相关配置：

easycom: {
  autoscan: true,
  custom: {
+   '^uni-(.*)': '@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue',
  },
},

1. tsconfig.json 文件 compilerOptions.types 添加相关配置：

"types": [
    "@dcloudio/types",
    "@types/wechat-miniprogram",
+   "@uni-helper/uni-ui-types",
    "./components.d.ts",
    "./global.d.ts"
]

安装 `uv-ui` 库

1. 安装 uv-ui 库：

pnpm add @climblee/uv-ui

1. pages.config.ts 文件 easycom.custom 添加相关配置：

easycom: {
  autoscan: true,
  custom: {
+   '^uv-(.*)': '@climblee/uv-ui/components/uv-$1/uv-$1.vue',
  },
},

1. tsconfig.json 文件 compilerOptions.types 添加相关配置：

"types": [
  "@dcloudio/types",
  "@types/wechat-miniprogram",
+ "@ttou/uv-typings/shim",
+ "@ttou/uv-typings/v2",
  "./components.d.ts",
  "./global.d.ts"
]

其他 UI 库的安装类似，不再赘述。

全文完~

番外篇 -- wot-ui 全局配置

有几个适合在全局进行配置的，我都放到了 src/layouts/default/vue 里面，比如几个全局弹窗配置，比如主题色配置等，方便用户直接使用。

<template>
  <wd-config-provider :themeVars="themeVars">
    <slot />
    <wd-toast />
    <wd-message-box />
  </wd-config-provider>
</template>

<script lang="ts" setup>
import type { ConfigProviderThemeVars } from 'wot-design-uni'

const themeVars: ConfigProviderThemeVars = {
  // colorTheme: 'red',
  // buttonPrimaryBgColor: '#07c160',
  // buttonPrimaryColor: '#07c160',
}
</script>

解决了 useToast useMessage 等 API不生效的问题。

现在下面是直接生效的。


import { useMessage } from 'wot-design-uni'

const message = useMessage()
const handleClick = () => {
  // 顺便测试 message 的使用
  message.show('显示隐藏切换')
}

wd-config-provider 配置也增加示例，后续可以自己调配主题色，最好要先看 wot-ui 的官方文档。

番外篇 - 最佳实践

新项目使用 base 模板，可选 tabbar 模板。如果需要多语言，可以选 i18n 模板。

同时参考 demo 模板，可以直接 clone demo 项目，用来参考用。

推荐先全部体验一下 demo 的示例

# 新项目创建
pnpm create unibest my-project -b base
# 参考项目
git clone https://github.com/codercup/hello-unibest unibest-demo
# 参考项目-gitee
git clone https://gitee.com/codercup/hello-unibest unibest-demo

闲谈

unibest 目前已经 github - 1.1k star, gitee - 525 star.

欢迎有需要的童鞋品尝，如能大大加快您开发 uni-app 开发效率，那再好不过，说明我做的事情意义重大，造福国人，造福同胞，哈哈。

想入群的，请看我的沸点，掘金沸点-链接在此

因不能放引流二维码，只能自己前往沸点查看二维码。

【unibest文档】七、UI篇