@opentiny/vue

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 参数：

🛠️ 如何使用

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):

❤️ 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