Tuniao UI

TuniaoUI 是基于 uni-app 的 Vue3 TypeScript 开源组件库，提供覆盖多端（H5、微信小程序、APP）的组件与行业模板，解决后端及前端开发者快速产出高颜值界面的痛点。

它能做什么

TuniaoUI 提供从基础组件到完整页面模板的全链路能力，覆盖表单、信息展示、布局等常见需求，并自带 8 套行业级模板（如盲盒、OA办公、品牌商城、企业官网、资讯名片、壁纸、社区博客、圈子商圈），开发者可直接复用或动态化数据。

• 组件覆盖：包含颜色、背景、文本、间距、内边距、外边距、尺寸、宽度、高度、Flex布局、边框、阴影等样式工具，以及常用表单与信息展示组件。
• 开源协议：遵循 MIT 协议，允许自由使用、修改和商用，但禁止用于赌博、暴力等非法领域。

怎么上手

TuniaoUI V3 支持 npm、tuniao-cli 和 uni_modules 三种安装方式。由于 npm 包以源码形式发布（未二次打包），需同时安装 @tuniao/tnui-vue3-uniapp、@tuniao/tn-icon、@tuniao/tn-style 三个依赖包，并确保项目已配置 TypeScript 和 Sass 环境。

• npm 安装：执行 `npm install @tuniao/tnui-vue3-uniapp @tuniao/tn-icon @tuniao/tn-style`，并安装 sass 和 sass-loader 作为开发依赖。
• tuniao-cli 安装：全局安装 tuniao-cli 后，通过 `tuniao create [文件夹名]` 创建项目模板，Windows 下需以管理员模式运行 PowerShell 并执行 `set-ExecutionPolicy RemoteSigned`。
• uni_modules 安装：在 DCloud 插件市场搜索“TuniaoUI vue3 uni_modules”直接导入，无需手动配置依赖。
• 模板克隆：若下载模板过慢，可从 GitHub 或 Gitee 直接 clone 模板仓库（github.com/tuniaoTech/tuniaoui-vue3-uniapp-template 或 gitee.com/TSpecific/tuniao-ui-vue3-uniapp-template）。

内容特色

TuniaoUI 不仅提供组件，更强调“模板即产品”的理念，其官方团队针对不同行业开发了完整页面模板，开发者只需替换数据即可上线。此外，图鸟生态还维护 Vue2 和鸿蒙版本，形成多生态覆盖。

• 多版本生态：同时维护 Vue2、Vue3 和鸿蒙版，满足不同技术栈需求。
• 开源贡献者：社区贡献者包括北笙༊、孟夏乾月、FelixL-Dev 等，共同推动组件库迭代。
• 演示与示例：提供示例项目源码（GitHub 仓库 tuniaoTech/tuniaoui-uniapp-v3-demo）和在线演示地址，方便开发者快速体验。

常见问题

Q1：TuniaoUI 的 npm 包为什么需要同时安装三个依赖？

A1：因为 TuniaoUI V3 的 npm 包以源码形式发布（未二次打包），必须同时安装 @tuniao/tnui-vue3-uniapp、@tuniao/tn-icon 和 @tuniao/tn-style 三个包，否则组件无法正常使用。

Q2：TuniaoUI 的模板可以商用吗？

A2：可以。TuniaoUI 遵循 MIT 协议，允许自由使用、修改和商用，但禁止用于赌博、暴力等非法领域。官方提供的 8 套模板（如盲盒、OA办公、品牌商城等）均可直接用于商业项目。

Q3：TuniaoUI 支持哪些平台？

A3：基于 uni-app 开发，支持编译为 H5、微信小程序和 APP。Vue3 版本当前文档主要面向 uni-app 生态，后续计划拓展更多原生版本。

更多同类工具与网站,可在移动端分类继续挑选。

信息核实于 2026年7月,具体以官网为准。