TinyVue 使用指南

TinyVue 使用指南

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. 项目地址: https://gitcode.com/gh_mirrors/ti/tiny-vue

1. 项目介绍

TinyVue 是 OpenTiny 社区推出的一个企业级 UI 组件库，支持 Vue.js 2 和 Vue.js 3，同时适用于桌面和移动端应用。它提供了 104 个干净、易用且强大的组件，支持国际化、主题定制，并且可以配置开发以支持低代码平台。TinyVue 采用跨端和跨框架的架构，使得它灵活且可移植。

2. 项目快速启动

安装

根据您的 Vue.js 版本，使用以下命令安装 TinyVue 组件库：

• 对于 Vue.js 3，执行以下命令：

npm i @opentiny/vue@3

• 对于 Vue.js 2，执行以下命令：

npm i @opentiny/vue@2

引入组件

安装完成后，您可以在 App.vue 文件中引入并使用 TinyVue 组件，例如 TinyButton：

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

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

开发环境

要开始开发，请按照以下步骤操作：

1. 克隆项目：

git clone git@github.com:opentiny/tiny-vue.git

2. 进入项目目录：

cd tiny-vue

3. 安装依赖：

pnpm i

4. 根据您的 Vue.js 版本启动开发服务器：

• 对于 Vue.js 3，执行以下命令：

pnpm dev

• 对于 Vue.js 2，执行以下命令：

pnpm dev2

5. 在浏览器中打开以下地址：

http://127.0.0.1:7130/

3. 应用案例和最佳实践

在 OpenTiny 社区中，您可以找到许多基于 TinyVue 构建的应用案例和最佳实践。以下是一些推荐的步骤来学习和使用这些案例：

• 阅读官方文档和教程，了解组件的使用和配置。
• 查看社区提供的示例项目，学习如何在实际应用中使用 TinyVue。
• 加入技术交流群组，与其他开发者交流心得和经验。

4. 典型生态项目

TinyVue 作为 Vue.js 的组件库，与其他开源项目有着良好的兼容性和集成性。以下是一些典型的生态项目：

• 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 实现的。

通过上述指南，您可以快速上手 TinyVue，并开始构建高质量的前端应用。

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. 项目地址: https://gitcode.com/gh_mirrors/ti/tiny-vue