UI使用篇

snail-uni 最终选择wot-design-uni作为默认UI库，开发者可以根据需求选择其他UI库,本篇将介绍wot-design-uni在过程中遇到的问题和其他UI库的替换方法。

wot-design-uni：一个基于Vue3 + TS 开发的 uni-app 组件库，提供 70+ 高质量组件，支持暗黑模式、国际化和自定义主题

注意

截止2024-07-30 之前， Wot-design-uni目前支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等平台! 如果需要适配其他平台请卸载wot-design-uni，并安装使用其他UI库。

组件问题

关于Wot-design-uni组件库的使用问题请移步至常见问题

UI库替换

snail-uni 脚手架支持选择不用版本的ui库，如果你已经安装使用了wot-design-uni，不想重新构建的情况下请先卸载wot-design-uni，然后按照以下步骤安装其他UI库（其他UI相同操作，不再赘述）

• 以wot-design-uni为例

1.卸载wot-design-uni

pnpm

$ pnpm remove wot-design-uni

npm

$ npm  uninstall wot-design-uni

yarn

$ yarn remove wot-design-uni

bun

$ bun remove wot-design-uni

2.删除配置文件

在src/pages.config.ts 文件删除相关配置：

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

3.安装其他UI库

注： 详细文档请查阅官方文档

• uni-ui文档：uni-app官方维护的UI组件库
• uv-ui文档：uv-ui 破釜沉舟之兼容vue3+2、nvue、app、h5、小程序等多端基于 uni-app 和 uView2.x 的生态框架，支持 单独导入，开箱即用，利剑出击
• uview-plus文档： uview-plus 是全面兼容nvue 的 uni-app生态框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
• tuniao-ui-uniapp-v3文档：TuniaoUI vue3 uniapp 是一款基于 uniapp、vue3、Typescript 进行开发的 UI组件库

uni-ui

pnpm add  @dcloudio/uni-ui
# or npm
# npm install @dcloudio/uni-ui
# or yarn
# yarn add @dcloudio/uni-ui

uv-ui

pnpm add uv-ui
# or npm
# npm install @climblee/uv-ui
# or yarn
# yarn add @climblee/uv-ui

uview-plus

pnpm add uview-plus
# or npm
# npm install uview-plus
# or yarn
# yarn add uview-plus

Tuniao UI Uniapp V3

pnpm add @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style
# or npm
# npm install @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style
# or yarn
# yarn add @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style

4.配置其他UI库

• 在 src/pages.config.ts 文件添加相关配置：

uni-ui

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

uv-ui

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

uview-plus

easycom: {
    autoscan: true,
    custom: {
      "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue", 
		"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue", 
	    "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
    }
}

Tuniao UI Uniapp V3

{
  easycom: {
    custom: {
      "^tn-(.*)-(item|group)$": "@tuniao/tnui-vue3-uniapp/components/$1/src/$1-$2.vue", 
      "^tn-(.*)": "@tuniao/tnui-vue3-uniapp/components/$1/src/$1.vue"
    }
  },
}

• 在 src/tsconfig.json 文件添加相关配置：

uni-ui

{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@uni-helper/uni-ui-types", 
    ]
  }
}

uv-ui

{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@ttou/uv-typings/shim", 
      "@ttou/uv-typings/v2", 
    ]
  }
}

uview-plus

{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "uview-plus/types/index.d.ts", 
    ]
  }
}

Tuniao UI Uniapp V3

{
  "compilerOptions": {
    "types": [
      "@dcloudio/types",
      "@types/wechat-miniprogram",
      "@tuniao/tnui-vue3-uniapp/types/index.d.ts", 
      "@tuniao/tn-icon/types/index.d.ts", 
    ]
  }
}