tiny-vue:104款组件，跨Vue2/Vue3、PC/移动端，支持国际化与主题定制

Star19
4
代码
代码
Issues4
Pull Requests1
流水线
项目讨论
Wiki
分析
Star19
4

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

分支79Tags36
文件最后提交记录最后更新时间
.agents
fix: supplement development document specifications (#4218) * fix: supplement development document specifications * fix: change skill name * fix: change skill name * fix: add design.skill.md
2 个月前
.cid
chore: add dialog-select/filter-panel to tiny-vue.yml (#487)
2 年前
.codecheck
chore: add dialog-select/filter-panel to tiny-vue.yml (#487)
2 年前
.github
ci(workflows): update environment variable references to use secrets in deployment workflows (#4177)
3 个月前
.husky
fix(tabs-mf): beforeLeave trigger twice (#4191)
3 个月前
.vscode
refactor(pager): [pager] refactor pager style (#2162) * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] inline pager design config * refactor(pager): [pager] refactor pager style * refactor(pager): [pager] refactor pager style
1 年前
examples
fix(tabs): 修复 showMoreTabs 模式下 overflow 计算滞后导致下拉菜单未及时更新(#4279) (#4272) * fix(tabs): fix showMoreTabs overflow calculation lag caused by CSS transition The nav element has CSS transition: transform 0.3s, which causes getBoundingClientRect() to return pre-transition positions when calcMorePanes runs in requestAnimationFrame (before the transition has advanced). Fix: use tab-relative-to-nav position delta (transition-invariant since both share the same transform coordinate space) plus navOffset to compute the final expected positions, bypassing the transition intermediate state entirely. Also replace nextTick with requestAnimationFrame in deferred calcMorePanes calls to ensure all cascading DOM updates from scrollToActiveTab -> updated() chains have settled. * fix(tab-nav): trigger calcMorePanes after scrollPrev/scrollNext arrow click * test(tabs): 修正 custom-more-icon 溢出下拉数量断言 showMoreTabs 溢出计算修正后按真实布局计算，容器 400px 减去 更多按钮占位后仅 5 个 tab 完整可见，下拉应为 Tab 6/7/8 共 3 项， 原断言 2 是基于旧实现 mount 早期量宽了 navScroll 的错误结果。
1 天前
internals
fix: solve the problem of not finding the package during packaging (#4179)
3 个月前
packages
fix: saas-design write the wrong icon name (#4295)
1 天前
patches
feat: support react and add new components: rich-text-editor/color-picker/divider/calendar-view
2 年前
.all-contributorsrc
docs: add liangguanhui0117 as a contributor for code (#3787) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com>
9 个月前
.depcheckrc.yaml
Refactor project to Monorepo and TypeScript (#90) * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-2e9669527b4f9d10ba441ea7a204dc1627ab0420 * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-a3c037ae0147e6ef27df417b09fff18d548a5fa7 * fix(tiny-vue): 修改license[WI2029] Match-id-646d905fcfedf0b9ceb147d9ce288916e3c78c45 * fix(tiny-vue): 修改package.json[WI2029] Match-id-8e0d6161964178ca68ee111f3bb0c60e27d9f3e0 * fix: fix conflict --------- Co-authored-by: OpenTiny <opentiny@sina.com>
3 年前
.eslintignore
feat: add dialog-select and refactor sites (#378)
2 年前
.eslintrc.js
refactor(mobile): remove @opentiny/mobile-utils package, and add alia… (#2767) * refactor(mobile): remove @opentiny/mobile-utils package, and add alias to utils * refactor(mobile): fix pnpm dev
1 年前
.gitattributes
Refactor project to Monorepo and TypeScript (#90) * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-2e9669527b4f9d10ba441ea7a204dc1627ab0420 * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-a3c037ae0147e6ef27df417b09fff18d548a5fa7 * fix(tiny-vue): 修改license[WI2029] Match-id-646d905fcfedf0b9ceb147d9ce288916e3c78c45 * fix(tiny-vue): 修改package.json[WI2029] Match-id-8e0d6161964178ca68ee111f3bb0c60e27d9f3e0 * fix: fix conflict --------- Co-authored-by: OpenTiny <opentiny@sina.com>
3 年前
.gitignore
feat: 将文件入口从忽略列表中移除，较少开发需要执行的命令 (#3841)
8 个月前
.hintrc
Refactor project to Monorepo and TypeScript (#90) * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-2e9669527b4f9d10ba441ea7a204dc1627ab0420 * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-a3c037ae0147e6ef27df417b09fff18d548a5fa7 * fix(tiny-vue): 修改license[WI2029] Match-id-646d905fcfedf0b9ceb147d9ce288916e3c78c45 * fix(tiny-vue): 修改package.json[WI2029] Match-id-8e0d6161964178ca68ee111f3bb0c60e27d9f3e0 * fix: fix conflict --------- Co-authored-by: OpenTiny <opentiny@sina.com>
3 年前
.lintstagedrc.json
ci(eslint): add husky and commitlint to eslint code (#1021)
2 年前
.npmrc
Refactor project to Monorepo and TypeScript (#90) * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-2e9669527b4f9d10ba441ea7a204dc1627ab0420 * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-a3c037ae0147e6ef27df417b09fff18d548a5fa7 * fix(tiny-vue): 修改license[WI2029] Match-id-646d905fcfedf0b9ceb147d9ce288916e3c78c45 * fix(tiny-vue): 修改package.json[WI2029] Match-id-8e0d6161964178ca68ee111f3bb0c60e27d9f3e0 * fix: fix conflict --------- Co-authored-by: OpenTiny <opentiny@sina.com>
3 年前
.prettierignore
feat: add dialog-select and refactor sites (#378)
2 年前
.prettierrc
feat: support react and add new components: rich-text-editor/color-picker/divider/calendar-view
2 年前
AGENTS.md
fix: 修改E2E 测试位置的描述 (#4260)
12 天前
CHANGELOG.md
Refactor project to Monorepo and TypeScript (#90) * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-2e9669527b4f9d10ba441ea7a204dc1627ab0420 * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-a3c037ae0147e6ef27df417b09fff18d548a5fa7 * fix(tiny-vue): 修改license[WI2029] Match-id-646d905fcfedf0b9ceb147d9ce288916e3c78c45 * fix(tiny-vue): 修改package.json[WI2029] Match-id-8e0d6161964178ca68ee111f3bb0c60e27d9f3e0 * fix: fix conflict --------- Co-authored-by: OpenTiny <opentiny@sina.com>
3 年前
CONTRIBUTING.md
chore: updated the contribution guide, optimized the instructions on triggering component e2e tests (#3348)
1 年前
CONTRIBUTING.zh-CN.md
chore: updated the contribution guide, optimized the instructions on triggering component e2e tests (#3348)
1 年前
LICENSE
Refactor project to Monorepo and TypeScript (#90) * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-2e9669527b4f9d10ba441ea7a204dc1627ab0420 * fix(tiny-vue): TinyVue工程momorepo改造[WI2029] Match-id-a3c037ae0147e6ef27df417b09fff18d548a5fa7 * fix(tiny-vue): 修改license[WI2029] Match-id-646d905fcfedf0b9ceb147d9ce288916e3c78c45 * fix(tiny-vue): 修改package.json[WI2029] Match-id-8e0d6161964178ca68ee111f3bb0c60e27d9f3e0 * fix: fix conflict --------- Co-authored-by: OpenTiny <opentiny@sina.com>
3 年前
PACKAGES.md
chore: Add TinyVue repository structure description (#3383) * chore: 添加TinyVue 仓库结构说明 * docs: 更新PACKAGES.md中的Aurora设计规范名称
1 年前
README.md
docs: add "Build with AI" content to README.md (#4121)
4 个月前
README.zh-CN.md
docs: add "Build with AI" content to README.md (#4121)
4 个月前
commitlint.config.js
ci(commmitlint): modify the commitlint tool submission limit (#2526)
1 年前
jsconfig.json
chore: add dialog-select/filter-panel to tiny-vue.yml (#487)
2 年前
logo.svg
chore: add dialog-select/filter-panel to tiny-vue.yml (#487)
2 年前
package.json
fix: 恢复指南菜单以及构建open模式，不带业务组件 (#4283)
5 天前
pnpm-workspace.yaml
chore(dependencies): update vitest and @vitest/ui versions to v3 (#3089)
1 年前
tiny-vue-skill.png
docs: add "Build with AI" content to README.md (#4121)
4 个月前
tsconfig.json
fix: fix renderless tsconfig paths not working (#3362)
1 年前
tsconfig.vue2.7.json
feat(common): use the hotspot function provided by the ArkWeb JS engine to optimize the execution of defineProperties function in the common adaptation layer (#3530)
1 年前
tsconfig.vue2.json
feat(common): use the hotspot function provided by the ArkWeb JS engine to optimize the execution of defineProperties function in the common adaptation layer (#3530)
1 年前
tsconfig.vue3.json
feat(common): use the hotspot function provided by the ArkWeb JS engine to optimize the execution of defineProperties function in the common adaptation layer (#3530)
1 年前
vercel.json
chore(ci): add pr preview through vercel deploy (#1388)
2 年前
volar.config.js
chore: add dialog-select/filter-panel to tiny-vue.yml (#487)
2 年前

OpenTiny Logo

一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。

Ask DeepWiki

English | 简体中文

🌈 特性：

  • 📦 包含 104 个简洁、易用、功能强大的组件
  • 🖖 一套代码同时支持 Vue 2 和 Vue 3
  • 🖥️ 一套代码同时支持 PC 端和移动端
  • 🌍 支持国际化
  • 🎨 支持主题定制
  • 📊 组件内部支持配置式开发，可支持低代码平台可视化组件配置
  • 💡 采用模板、样式、逻辑分离的跨端、跨框架架构，保障灵活性和可移植性

AI 编程

tiny-vue-skill 是一套面向 AI 编码助手的技能工具集，让 AI 助手深度理解 TinyVue 组件库的用法、API 和最佳实践，从而帮助您更高效地使用 TinyVue 开发应用。

你可以通过以下命令，全局安装 tiny-vue-skill：

npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor

tiny-vue-skill

部分其他 AI 工具对应的 --agent 参数：

Agent --agent
Amp amp
Antigravity antigravity
Claude Code claude-code
Clawdbot clawdbot
Codex codex
Cursor cursor
Droid droid
Gemini CLI gemini-cli
GitHub Copilot github-copilot
Goose goose
Kilo Code kilo
Kiro CLI kiro-cli
OpenCode opencode
Roo Code roo
Trae trae
Windsurf windsurf

🛠️ 如何使用

1. 安装

执行以下命令，安装 Vue 3 版本的 TinyVue 组件库：

npm i @opentiny/vue@3

执行以下命令，安装 Vue 2 版本的 TinyVue 组件库：

npm i @opentiny/vue@2

2. 引入和使用

在App.vue文件中使用 TinyVue 组件。

<script lang="ts" setup>
  import { Button as TinyButton } from '@opentiny/vue'
</script>

<template>
  <tiny-button>TinyVue</tiny-button>
</template>

🖥️ 本地开发

git clone git@github.com:opentiny/tiny-vue.git
cd tiny-vue
pnpm i

# 启动 Vue3 项目
pnpm dev

# 启动 Vue2 项目
pnpm dev2

打开浏览器访问：http://127.0.0.1:7130/

🤝 参与贡献

如果你对我们的开源项目感兴趣，欢迎加入我们！🎉

参与贡献之前请先阅读贡献指南。

✨ 贡献者

贡献者是在 OpenTiny 社区中合并了 1 个或多个 PR 的社区成员。

感谢以下 OpenTiny 的贡献者们 (emoji key):

Kagol
Kagol
💻		 ajaxzheng
ajaxzheng
💻		 TC-twwang
TC-twwang
💻		 jacknan
jacknan
💻		 Pithy
Pithy
💻		 heygsc
heygsc
💻		 MangoWu
MangoWu
💻		 ADNY
ADNY
💻
chenxi-20
chenxi-20
💻		 Alaray
Alaray
💻		 ing
ing
💻		 申君健
申君健
💻		 MomoPoppy
MomoPoppy
💻		 WXC-Spring
WXC-Spring
💻		 GaoNeng
GaoNeng
💻		 acyza
acyza
💻
ygj6
ygj6
💻		 MrWang2016
MrWang2016
💻		 qinwencheng
qinwencheng
💻		 黄怡林
黄怡林
💻		 zuixinwang
zuixinwang
💻		 luopei
luopei
💻		 前端爆冲
前端爆冲
🚇		 Xie Jay
Xie Jay
🚇
linxiang
linxiang
💻		 程序员包子
程序员包子
💻		 peter G
peter G
💻 📖		 gimmyhehe
gimmyhehe
💻		 dong
dong
💻		 凌览
凌览
💻		 Caesar-ch
Caesar-ch
💻		 chenqifeng66
chenqifeng66
⚠️
Zz-ZzzZ
Zz-ZzzZ
⚠️		 Lyx
Lyx
💻		 Spark Bill
Spark Bill
💻		 wendZzoo
wendZzoo
💻		 Gweesin Chan
Gweesin Chan
💻		 Binks_
Binks_
📖		 yoyo
yoyo
💻		 Kif
Kif
💻
jack-zishan
jack-zishan
💻		 LinboLen
LinboLen
💻		 vaebe
vaebe
💻		 YuYan Li
YuYan Li
💻		 shonen7
shonen7
💻		 xlearns
xlearns
💻		 tianxin
tianxin
💻		 Xppp0217
Xppp0217
💻
AcWrong02
AcWrong02
🐛		 betavs
betavs
💻		 fanbingbing16
fanbingbing16
💻		 dyh333
dyh333
📖		 betterdancing
betterdancing
📖		 David
David
💻		 falcon-jin
falcon-jin
💻		 wuyiping0628
wuyiping0628
⚠️
James
James
📖		 ourcx
ourcx
💻

❤️ Credits

感谢：

  • element 项目，它是一个老牌的基于 Vue.js 的组件库，TinyVue 在设计之初借鉴了 Element，并针对 Element 的组件 API 进行兼容。
  • floating-ui 项目，它是一个轻量级、无依赖、高性能的定位库，TinyVue 的多个组件都是基于 Floating UI 提供的能力。
  • vxe-table 项目，它是一个基于 Vue 的表格组件，支持丰富的功能，TinyVue 的 Grid 组件基于 vxe-table。
  • sortablejs 项目，它是一个功能强大的拖拽库，TinyVue 的 Grid / Transfer / Tabs 等多个组件的拖拽排序功能都基于 Sortable。
  • @adamwathan 写的文章《Renderless Components in Vue.js》，这篇文章启发了 TinyVue 的无渲染组件设计架构，并最终在 TinyVue 项目中实现了跨端、跨框架能力。

开源协议

MIT

项目介绍

TinyVue是OpenTiny社区推出的一款企业级UI组件库，支持Vue.js 2和Vue.js 3，适用于桌面和移动设备。【此简介由AI生成】

MIT TypeScript3.09 K提交数vuetypescript
定制我的领域
README
规则集
211.5 K247访问 GitHub