billkang / tiny-vue

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.

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

English | 简体中文

🌈 Features:

• 📦 104 clean, easy-to-use and powerful components.
• 🖖 One code, Support both Vue.js 2 and Vue.js 3.
• 🖥️ One code, Support both PC and Mobile.
• 🌍 Support internationalization.
• 🎨 Support theme customization.
• 📊 Components support configuration development, can support low-code platform.
• 💡 Use a cross-end and cross-framework architecture, flexible and portable.

🛠️ Usage

1. Installation

Execute the following command to install the TinyVue component library for Vue.js 3.

npm i @opentiny/vue@3

Execute the following command to install the TinyVue component library for Vue.js 2.

npm i @opentiny/vue@2

2. Import component

Then you can use the TinyVue component(such as <tiny-button>) in the App.vue file.

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

<template>
  <tiny-button>Tiny Vue</tiny-button>
</template>

🖥️ Development

git clone [email protected]:opentiny/tiny-vue.git
cd tiny-vue
pnpm i

# Vue.js 3
pnpm dev

# Vue.js 2
pnpm dev2

Open your browser and visit: http://127.0.0.1:7130/

🤝 Contributing

Welcome to join our OpenTiny community!🎉

If you don't know how to start, please read our contributing guide.

• Add the official assistant WeChat opentiny-official and join the technical exchange group.
• Add to the mailing list [email protected]

✨ Contributors

Contributors are community members who have 1 or more PR merged in OpenTiny.

Thanks goes to these wonderful people (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 📖	ichynul 💻	Davont 💻	Nick Wu 💻	Floyd 💻	Jevin 💻

❤️ Credits

Thanks to:

• The element project which is an old component library based on Vue.js. TinyVue draws on Element at the beginning of its design, and is compatible with Element's component API.
• The floating-ui project which is a small library that helps you create "floating" elements such as tooltips, popovers, dropdowns, and more. Many components of TinyVue are based on the capabilities provided by Floating UI.
• The vxe-table project which is a Vue-based table component, supports rich features, TinyVue's Grid component is based on vxe-table.
• The sortablejs project which is a powerful drag-and-drop library. The drag-and-drop sorting function of TinyVue's Grid / Transfer / Tabs and other components is based on Sortable.
• @adamwathan's article Renderless Components in Vue.js, which inspired TinyVue's renderless component design architecture and ultimately enabled cross-end and cross-framework capabilities in the TinyVue project.

License

MIT