2023-02-16 19:11:16 +08:00
|
|
|
<p align="center">
|
2023-03-20 15:25:25 +08:00
|
|
|
<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%;">
|
2023-02-16 19:11:16 +08:00
|
|
|
</a>
|
|
|
|
</p>
|
2022-07-12 15:58:02 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
<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>
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
English | [简体中文](README.zh-CN.md)
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
🌈 Features:
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
- 📦 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.
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
## 🛠️ Usage
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
### 1. Installation
|
|
|
|
|
|
|
|
Execute the following command to install the TinyVue component library for Vue.js 3.
|
2023-02-16 19:11:16 +08:00
|
|
|
|
|
|
|
```shell
|
2023-03-20 15:25:25 +08:00
|
|
|
npm i @opentiny/vue@3
|
2023-02-16 19:11:16 +08:00
|
|
|
```
|
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
Execute the following command to install the TinyVue component library for Vue.js 2.
|
2023-02-16 19:11:16 +08:00
|
|
|
|
|
|
|
```shell
|
|
|
|
npm i @opentiny/vue@2
|
|
|
|
```
|
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
### 2. Import component
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
Then you can use the TinyVue component(such as `<tiny-button>`) in the `App.vue` file.
|
2023-02-16 19:11:16 +08:00
|
|
|
|
|
|
|
```vue
|
|
|
|
<script lang="ts" setup>
|
|
|
|
import { Button as TinyButton } from '@opentiny/vue'
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<tiny-button>Tiny Vue</tiny-button>
|
|
|
|
</template>
|
|
|
|
```
|
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
## 🖥️ Development
|
2023-02-16 19:11:16 +08:00
|
|
|
|
|
|
|
```shell
|
|
|
|
git clone git@github.com:opentiny/tiny-vue.git
|
|
|
|
cd tiny-vue
|
2023-02-20 19:56:51 +08:00
|
|
|
npm i --legacy-peer-deps
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
# Vue.js 3
|
2023-02-16 19:11:16 +08:00
|
|
|
npm run dev:vue3
|
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
# Vue.js 2
|
2023-02-16 19:11:16 +08:00
|
|
|
npm run dev:vue2
|
|
|
|
```
|
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
Open your browser and visit: [http://127.0.0.1:5173/](http://127.0.0.1:5173/)
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
## 🤝 Contributing
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
Welcome to join our OpenTiny community!🎉
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
If you don't know how to start, please read our [contributing guide](CONTRIBUTING.md).
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
- Add the official assistant WeChat `opentiny-official` and join the technical exchange group.
|
|
|
|
- Add to the mailing list `opentiny@googlegroups.com`
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-20 15:25:25 +08:00
|
|
|
## License
|
2023-02-16 19:11:16 +08:00
|
|
|
|
2023-03-28 20:37:18 +08:00
|
|
|
[MIT](LICENSE)
|