TinyVue：同时支持 Vue.js 2 / Vue.js 3 与 PC / 移动端的企业级 UI 组件库
TinyVue 是 OpenTiny 社区开源的企业级 UI 组件库，提供 104 个易用组件，一份代码同时支持 Vue.js 2 与 Vue.js 3、PC 与移动端，支持国际化、主题定制和配置化开发（可服务低代码平台），并采用跨端跨框架架构。项目同时提供 tiny-vue-skill 技能工具，让 AI 编码助手深入理解组件的用法、API 与最佳实践。许可证为 MIT。
社区作者 · zZz
它解决什么问题
TinyVue 是 OpenTiny 社区开源的企业级 UI 组件库，定位为「一份代码，同时支持 Vue.js 2 和 Vue.js 3，同时支持 PC 和移动端」（配图 1 为 OpenTiny Logo）。
核心特性
- 📦 提供 104 个简洁、易用且功能强大的组件。
- 🖖 一份代码，同时支持 Vue.js 2 与 Vue.js 3。
- 🖥️ 一份代码，同时支持 PC 端与移动端。
- 🌍 支持国际化。
- 🎨 支持主题定制。
- 📊 组件支持配置化开发，可用于支撑低代码平台。
- 💡 采用跨端、跨框架架构，灵活且便于移植。
Build with AI（配图 2）
TinyVue 提供 tiny-vue-skill（配图 2），这是一套面向 AI 编码助手的技能工具集，使其能够深入理解 TinyVue 组件库的使用方法、API 和最佳实践，从而帮助你更高效地使用 TinyVue 开发应用。
该技能可通过
npx 全局安装，并支持指定不同的 AI 编码代理（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
使用与开发
安装：Vue.js 3 使用 npm i @opentiny/vue@3，Vue.js 2 使用 npm i @opentiny/vue@2；随后即可在 App.vue 中使用组件（如 <tiny-button>）。
本地开发：克隆仓库 → 进入目录 → pnpm i → Vue.js 3 执行
pnpm dev，Vue.js 2 执行
pnpm dev2 → 浏览器访问 http://127.0.0.1:7130/。
社区与致谢
欢迎加入 OpenTiny 社区，可阅读 contributing guide；官方助手微信 opentiny-official，邮件列表 [email protected]。
项目致谢：Element（TinyVue 设计之初借鉴 Element，并兼容其组件 API）、floating-ui（浮动元素能力，多个组件基于其能力）、vxe-table（Grid 组件基于 vxe-table）、sortablejs（Grid / Transfer / Tabs 等组件的拖拽排序基于 Sortable），以及 @adamwathan 的文章 Renderless Components in Vue.js（启发了 renderless 组件设计架构，最终实现跨端跨框架能力）。
适用对象
- 使用 Vue.js 2 或 Vue.js 3 的前端开发团队。
- 需要同时覆盖 PC 与移动端的业务系统。
- 需要国际化、主题定制的企业级中后台应用。
- 低代码平台开发者（组件支持配置化开发）。
- 使用 AI 编码助手（Cursor、Claude Code、GitHub Copilot 等）并希望提升 TinyVue 开发效率的开发者。
许可证：MIT。
— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
一、准备环境
- 需要 Node.js 环境与包管理器 pnpm（本地开发流程使用 pnpm）。
- 若仅在业务项目中使用组件库，直接使用 npm 安装即可。
二、在项目中使用（安装组件库）
- 安装 Vue.js 3 版本的 TinyVue 组件库：
npm i @opentiny/vue@3- 安装 Vue.js 2 版本的 TinyVue 组件库：
npm i @opentiny/vue@2<script lang="ts" setup> import { Button as TinyButton } from '@opentiny/vue' </script>
- 在 App.vue 中导入并使用组件（示例以 tiny-button 为例）：
<template> <tiny-button>Tiny Vue</tiny-button> </template>
三、安装 AI 编码助手技能（tiny-vue-skill）
使用以下命令将 tiny-vue-skill 全局安装：
npx skills add opentiny/agent-skills -g --skill tiny-vue-skill --agent cursor其中 --agent 参数按所用 AI 工具替换：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
git clone [email protected]:opentiny/tiny-vue.git步骤 2
cd tiny-vue步骤 3
pnpm i- 启动开发服务：
Vue.js 3
pnpm devVue.js 2
pnpm dev2- 打开浏览器访问：http://127.0.0.1:7130/
五、首次运行与常见问题
首次运行前必须先执行
pnpm i 安装依赖，否则 pnpm dev / pnpm dev2 无法启动。
- 区分目标框架：Vue.js 2 项目请安装 @opentiny/vue@2 并运行 pnpm dev2；Vue.js 3 项目请安装 @opentiny/vue@3 并运行 pnpm dev。
- 本地开发服务默认地址为 http://127.0.0.1:7130/，如端口被占用需自行排查。
- 组件 API 兼容 Element，原 Element 使用习惯可迁移；Grid 组件基于 vxe-table，拖拽排序基于 Sortable。
- 社区支持：官方助手微信 opentiny-official，邮件列表 [email protected]，也可阅读 contributing guide 参与贡献。
