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

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

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

部分其他 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-official，加入技术交流群
• 加入邮件列表 opentiny@googlegroups.com

✨ 贡献者

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

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

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