@opentiny/vue

<a href="https://opentiny.design/tiny-vue" target="_blank" rel="noopener noreferrer"> <img alt="OpenTiny Logo" src="logo.svg" height="100" style="max-width:100%;"> </a> 一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/opentiny/tiny-vue) [English](README.md) | 简体中文 🌈 特性： - 📦 包含 104 个简洁、易用、功能强大的组件 - 🖖 一套代码同时支持 Vue 2 和 Vue 3 - 🖥️ 一套代码同时支持 PC 端和移动端 - 🌍 支持国际化 - 🎨 支持主题定制 - 📊 组件内部支持配置式开发，可支持低代码平台可视化组件配置 - 💡 采用模板、样式、逻辑分离的跨端、跨框架架构，保障灵活性和可移植性 ## AI 编程 `tiny-vue-skill` 是一套面向 AI 编码助手的技能工具集，让 AI 助手深度理解 TinyVue 组件库的用法、API 和最佳实践，从而帮助您更高效地使用 TinyVue 开发应用。你可以通过以下命令，全局安装 `tiny-vue-skill`： ```bash npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor ``` ![tiny-vue-skill](tiny-vue-skill.png) 部分其他 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 组件库： ```shell npm i @opentiny/vue@3 ``` 执行以下命令，安装 Vue 2 版本的 TinyVue 组件库： ```shell npm i @opentiny/vue@2 ``` ### 2. 引入和使用在`App.vue`文件中使用 TinyVue 组件。 ```html <script lang="ts" setup> import { Button as TinyButton } from '@opentiny/vue' </script> <template> <tiny-button>TinyVue</tiny-button> </template> ``` ## 🖥️ 本地开发 ```shell 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/](http://127.0.0.1:7130/) ## 🤝 参与贡献如果你对我们的开源项目感兴趣，欢迎加入我们！🎉 参与贡献之前请先阅读[贡献指南](CONTRIBUTING.zh-CN.md)。 - 添加官方小助手微信 opentiny-official，加入技术交流群 - 加入邮件列表 opentiny@googlegroups.com ## ✨ 贡献者贡献者是在 OpenTiny 社区中合并了 1 个或多个 PR 的社区成员。感谢以下 OpenTiny 的贡献者们 ([emoji key](https://allcontributors.org/docs/en/emoji-key)):    <table> <tbody> <tr> <td align="center" valign="top" width="12.5%"><a href="https://github.com/kagol"><img src="https://avatars.githubusercontent.com/u/9566362?v=4?s=100" width="100px;" alt="Kagol"/> Kagol</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=kagol" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/zzcr"><img src="https://avatars.githubusercontent.com/u/18521562?v=4?s=100" width="100px;" alt="ajaxzheng"/> ajaxzheng</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=zzcr" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/TC-twwang"><img src="https://avatars.githubusercontent.com/u/42400776?v=4?s=100" width="100px;" alt="TC-twwang"/> TC-twwang</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=TC-twwang" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/MNZhu"><img src="https://avatars.githubusercontent.com/u/17588953?v=4?s=100" width="100px;" alt="jacknan"/> jacknan</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=MNZhu" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/awspi"><img src="https://avatars.githubusercontent.com/u/66438036?v=4?s=100" width="100px;" alt="Pithy"/> Pithy</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=awspi" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/heygsc"><img src="https://avatars.githubusercontent.com/u/103993866?v=4?s=100" width="100px;" alt="heygsc"/> heygsc</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=heygsc" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/wwttff"><img src="https://avatars.githubusercontent.com/u/32888622?v=4?s=100" width="100px;" alt="MangoWu"/> MangoWu</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=wwttff" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/ErKeLost"><img src="https://avatars.githubusercontent.com/u/66500121?v=4?s=100" width="100px;" alt="ADNY"/> ADNY</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=ErKeLost" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="12.5%"><a href="https://github.com/chenxi-20"><img src="https://avatars.githubusercontent.com/u/76168465?v=4?s=100" width="100px;" alt="chenxi-20"/> chenxi-20</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=chenxi-20" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/rayhaoqin"><img src="https://avatars.githubusercontent.com/u/46983981?v=4?s=100" width="100px;" alt="Alaray"/> Alaray</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=rayhaoqin" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/yuanningning"><img src="https://avatars.githubusercontent.com/u/104059491?v=4?s=100" width="100px;" alt="ing"/> ing</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=yuanningning" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/shenjunjian"><img src="https://avatars.githubusercontent.com/u/6848520?v=4?s=100" width="100px;" alt="申君健"/> 申君健</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=shenjunjian" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/MomoPoppy"><img src="https://avatars.githubusercontent.com/u/125256456?v=4?s=100" width="100px;" alt="MomoPoppy"/> MomoPoppy</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=MomoPoppy" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/WXC-Spring"><img src="https://avatars.githubusercontent.com/u/131581326?v=4?s=100" width="100px;" alt="WXC-Spring"/> WXC-Spring</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=WXC-Spring" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/GaoNeng-wWw"><img src="https://avatars.githubusercontent.com/u/31283122?v=4?s=100" width="100px;" alt="GaoNeng"/> GaoNeng</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=GaoNeng-wWw" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://acyza.github.io"><img src="https://avatars.githubusercontent.com/u/101238421?v=4?s=100" width="100px;" alt="acyza"/> acyza</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=acyza" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="12.5%"><a href="https://github.com/ygj6"><img src="https://avatars.githubusercontent.com/u/7699524?v=4?s=100" width="100px;" alt="ygj6"/> ygj6</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=ygj6" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/MrWang2016"><img src="https://avatars.githubusercontent.com/u/24307164?v=4?s=100" width="100px;" alt="MrWang2016"/> MrWang2016</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=MrWang2016" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/qinwencheng"><img src="https://avatars.githubusercontent.com/u/24841685?v=4?s=100" width="100px;" alt="qinwencheng"/> qinwencheng</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=qinwencheng" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/Huangyilin19"><img src="https://avatars.githubusercontent.com/u/48042709?v=4?s=100" width="100px;" alt="黄怡林"/> 黄怡林</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=Huangyilin19" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/zuixinwang"><img src="https://avatars.githubusercontent.com/u/59717852?v=4?s=100" width="100px;" alt="zuixinwang"/> zuixinwang</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=zuixinwang" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/LadyChatterleyLover"><img src="https://avatars.githubusercontent.com/u/35223515?v=4?s=100" width="100px;" alt="luopei"/> luopei</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=LadyChatterleyLover" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://juejin.cn/user/1996368846785128"><img src="https://avatars.githubusercontent.com/u/31237954?v=4?s=100" width="100px;" alt="前端爆冲"/> 前端爆冲</a> <a href="#infra-brenner8023" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/xiejay97"><img src="https://avatars.githubusercontent.com/u/64340763?v=4?s=100" width="100px;" alt="Xie Jay"/> Xie Jay</a> <a href="#infra-xiejay97" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td> </tr> <tr> <td align="center" valign="top" width="12.5%"><a href="https://github.com/linxiang07"><img src="https://avatars.githubusercontent.com/u/40119767?v=4?s=100" width="100px;" alt="linxiang"/> linxiang</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=linxiang07" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://bollome.netlify.app/"><img src="https://avatars.githubusercontent.com/u/103836393?v=4?s=100" width="100px;" alt="程序员包子"/> 程序员包子</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=coderbaozi" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/pe-3"><img src="https://avatars.githubusercontent.com/u/103579791?v=4?s=100" width="100px;" alt="peter G"/> peter G</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=pe-3" title="Code">💻</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=pe-3" title="Documentation">📖</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/gimmyhehe"><img src="https://avatars.githubusercontent.com/u/26026184?v=4?s=100" width="100px;" alt="gimmyhehe"/> gimmyhehe</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=gimmyhehe" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/KevinAndrewDong"><img src="https://avatars.githubusercontent.com/u/20911103?v=4?s=100" width="100px;" alt="dong"/> dong</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=KevinAndrewDong" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="http://www.linglan01.cn"><img src="https://avatars.githubusercontent.com/u/58327088?v=4?s=100" width="100px;" alt="凌览"/> 凌览</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=CatsAndMice" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/Caesar-ch"><img src="https://avatars.githubusercontent.com/u/74941512?v=4?s=100" width="100px;" alt="Caesar-ch"/> Caesar-ch</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=Caesar-ch" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/chenqifeng66"><img src="https://avatars.githubusercontent.com/u/97503755?v=4?s=100" width="100px;" alt="chenqifeng66"/> chenqifeng66</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=chenqifeng66" title="Tests">⚠️</a></td> </tr> <tr> <td align="center" valign="top" width="12.5%"><a href="https://zz-zzzz.github.io/"><img src="https://avatars.githubusercontent.com/u/48228016?v=4?s=100" width="100px;" alt="Zz-ZzzZ"/> Zz-ZzzZ</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=Zz-ZzzZ" title="Tests">⚠️</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/lyx-jay"><img src="https://avatars.githubusercontent.com/u/39766860?v=4?s=100" width="100px;" alt="Lyx"/> Lyx</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=lyx-jay" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/chenguang1994"><img src="https://avatars.githubusercontent.com/u/31501915?v=4?s=100" width="100px;" alt="Spark Bill"/> Spark Bill</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=chenguang1994" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/Zuowendong"><img src="https://avatars.githubusercontent.com/u/45628596?v=4?s=100" width="100px;" alt="wendZzoo"/> wendZzoo</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=Zuowendong" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/gweesin"><img src="https://avatars.githubusercontent.com/u/42909374?v=4?s=100" width="100px;" alt="Gweesin Chan"/> Gweesin Chan</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=gweesin" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/Binks123"><img src="https://avatars.githubusercontent.com/u/103343025?v=4?s=100" width="100px;" alt="Binks_"/> Binks_</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=Binks123" title="Documentation">📖</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/yoyo201626"><img src="https://avatars.githubusercontent.com/u/104079404?v=4?s=100" width="100px;" alt="yoyo"/> yoyo</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=yoyo201626" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://hexo.kifroom.icu/"><img src="https://avatars.githubusercontent.com/u/62132584?v=4?s=100" width="100px;" alt="Kif"/> Kif</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=wkif" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="12.5%"><a href="https://github.com/jack-zishan"><img src="https://avatars.githubusercontent.com/u/67041206?v=4?s=100" width="100px;" alt="jack-zishan"/> jack-zishan</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=jack-zishan" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="http://gradii.com"><img src="https://avatars.githubusercontent.com/u/5467712?v=4?s=100" width="100px;" alt="LinboLen"/> LinboLen</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=LinboLen" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/vaebe"><img src="https://avatars.githubusercontent.com/u/52314078?v=4?s=100" width="100px;" alt="vaebe"/> vaebe</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=vaebe" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://allenli178.top"><img src="https://avatars.githubusercontent.com/u/53218750?v=4?s=100" width="100px;" alt="YuYan Li"/> YuYan Li</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=allenli178" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/shonen7"><img src="https://avatars.githubusercontent.com/u/145949377?v=4?s=100" width="100px;" alt="shonen7"/> shonen7</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=shonen7" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/xlearns"><img src="https://avatars.githubusercontent.com/u/62782792?v=4?s=100" width="100px;" alt="xlearns"/> xlearns</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=xlearns" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/ianxinnew"><img src="https://avatars.githubusercontent.com/u/146069396?v=4?s=100" width="100px;" alt="tianxin"/> tianxin</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=ianxinnew" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/Xppp0217"><img src="https://avatars.githubusercontent.com/u/82315158?v=4?s=100" width="100px;" alt="Xppp0217"/> Xppp0217</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=Xppp0217" title="Code">💻</a></td> </tr> <tr> <td align="center" valign="top" width="12.5%"><a href="https://github.com/AcWrong02"><img src="https://avatars.githubusercontent.com/u/147061401?v=4?s=100" width="100px;" alt="AcWrong02"/> AcWrong02</a> <a href="https://github.com/opentiny/tiny-vue/issues?q=author%3AAcWrong02" title="Bug reports">🐛</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/betavs"><img src="https://avatars.githubusercontent.com/u/34408516?v=4?s=100" width="100px;" alt="betavs"/> betavs</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=betavs" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/fanbingbing16"><img src="https://avatars.githubusercontent.com/u/84823288?v=4?s=100" width="100px;" alt="fanbingbing16"/> fanbingbing16</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=fanbingbing16" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/dyh333"><img src="https://avatars.githubusercontent.com/u/1221313?v=4?s=100" width="100px;" alt="dyh333"/> dyh333</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=dyh333" title="Documentation">📖</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/betterdancing"><img src="https://avatars.githubusercontent.com/u/25901461?v=4?s=100" width="100px;" alt="betterdancing"/> betterdancing</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=betterdancing" title="Documentation">📖</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/David-TechNomad"><img src="https://avatars.githubusercontent.com/u/23149356?v=4?s=100" width="100px;" alt="David"/> David</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=David-TechNomad" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/falcon-jin"><img src="https://avatars.githubusercontent.com/u/48880836?v=4?s=100" width="100px;" alt="falcon-jin"/> falcon-jin</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=falcon-jin" title="Code">💻</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/wuyiping0628"><img src="https://avatars.githubusercontent.com/u/42107997?v=4?s=100" width="100px;" alt="wuyiping0628"/> wuyiping0628</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=wuyiping0628" title="Tests">⚠️</a></td> </tr> <tr> <td align="center" valign="top" width="12.5%"><a href="https://github.com/James-9696"><img src="https://avatars.githubusercontent.com/u/72028410?v=4?s=100" width="100px;" alt="James"/> James</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=James-9696" title="Documentation">📖</a></td> <td align="center" valign="top" width="12.5%"><a href="https://github.com/ourcx"><img src="https://avatars.githubusercontent.com/u/173872687?v=4&size=100" width="100px;" alt="ourcx"/> ourcx</a> <a href="https://github.com/opentiny/tiny-vue/commits?author=ourcx/" title="Code">💻</a></td> </tr> </tbody> </table>    ## ❤️ Credits 感谢： - [element](https://github.com/ElemeFE/element) 项目，它是一个老牌的基于 Vue.js 的组件库，TinyVue 在设计之初借鉴了 Element，并针对 Element 的组件 API 进行兼容。 - [floating-ui](https://github.com/floating-ui/floating-ui) 项目，它是一个轻量级、无依赖、高性能的定位库，TinyVue 的多个组件都是基于 Floating UI 提供的能力。 - [vxe-table](https://github.com/x-extends/vxe-table) 项目，它是一个基于 Vue 的表格组件，支持丰富的功能，TinyVue 的 Grid 组件基于 vxe-table。 - [sortablejs](https://github.com/SortableJS/Sortable) 项目，它是一个功能强大的拖拽库，TinyVue 的 Grid / Transfer / Tabs 等多个组件的拖拽排序功能都基于 Sortable。 - [@adamwathan](https://github.com/adamwathan) 写的文章[《Renderless Components in Vue.js》](https://adamwathan.me/renderless-components-in-vuejs/)，这篇文章启发了 TinyVue 的无渲染组件设计架构，并最终在 TinyVue 项目中实现了跨端、跨框架能力。 ## 开源协议 [MIT](LICENSE)