tiny-vue/README.md

<p align="center">
  <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>
</p>

<p align="center">An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.</p>

English | [简体中文](README.zh-CN.md)

🌈 Features:

- 📦 69 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.

```shell
npm i @opentiny/vue@3
```

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

```shell
npm i @opentiny/vue@2
```

### 2. Import component

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

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

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

## 🖥️ Development

```shell
git clone git@github.com: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/](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](CONTRIBUTING.md).

- Add the official assistant WeChat `opentiny-official` and join the technical exchange group.
- Add to the mailing list `opentiny@googlegroups.com`

## ✨ Contributors

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

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<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"/><br /><sub><b>Kagol</b></sub></a><br /><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"/><br /><sub><b>ajaxzheng</b></sub></a><br /><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"/><br /><sub><b>TC-twwang</b></sub></a><br /><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"/><br /><sub><b>jacknan</b></sub></a><br /><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"/><br /><sub><b>Pithy</b></sub></a><br /><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"/><br /><sub><b>heygsc</b></sub></a><br /><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"/><br /><sub><b>MangoWu</b></sub></a><br /><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"/><br /><sub><b>ADNY</b></sub></a><br /><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"/><br /><sub><b>chenxi-20</b></sub></a><br /><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"/><br /><sub><b>Alaray</b></sub></a><br /><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"/><br /><sub><b>ing</b></sub></a><br /><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="申君健"/><br /><sub><b>申君健</b></sub></a><br /><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"/><br /><sub><b>MomoPoppy</b></sub></a><br /><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"/><br /><sub><b>WXC-Spring</b></sub></a><br /><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"/><br /><sub><b>GaoNeng</b></sub></a><br /><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"/><br /><sub><b>acyza</b></sub></a><br /><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"/><br /><sub><b>ygj6</b></sub></a><br /><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"/><br /><sub><b>MrWang2016</b></sub></a><br /><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"/><br /><sub><b>qinwencheng</b></sub></a><br /><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="黄怡林"/><br /><sub><b>黄怡林</b></sub></a><br /><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"/><br /><sub><b>zuixinwang</b></sub></a><br /><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"/><br /><sub><b>luopei</b></sub></a><br /><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="前端爆冲"/><br /><sub><b>前端爆冲</b></sub></a><br /><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"/><br /><sub><b>Xie Jay</b></sub></a><br /><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"/><br /><sub><b>linxiang</b></sub></a><br /><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="程序员包子"/><br /><sub><b>程序员包子</b></sub></a><br /><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"/><br /><sub><b>peter G</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=pe-3" title="Code">💻</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"/><br /><sub><b>gimmyhehe</b></sub></a><br /><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"/><br /><sub><b>dong</b></sub></a><br /><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="凌览"/><br /><sub><b>凌览</b></sub></a><br /><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"/><br /><sub><b>Caesar-ch</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Caesar-ch" title="Code">💻</a></td>
    </tr>
  </tbody>
</table>

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

## License

[MIT](LICENSE)