基于 OpenTiny Design 设计体系的 vue UI 组件库，一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。

TinyVue 是华为云 OpenTiny 社区开发的一款企业级 UI 组件库，凭借其轻量、高可定制性和跨框架兼容性，TinyVue 在前端开发中占据了重要地位，尤其适合需要快速构建复杂界面的开发者。

项目特性

• 包含 104 个简洁、易用、功能强大的组件
• 一套代码同时支持 Vue 2 和 Vue 3
• 一套代码同时支持 PC 端和移动端
• 支持国际化
• 支持主题定制
• 组件内部支持配置式开发，可支持低代码平台可视化组件配置
• 采用模板、样式、逻辑分离的跨端、跨框架架构，保障灵活性和可移植性

核心亮点

• 一套代码同时支持 Vue 2 / Vue 3
• 一套代码同时支持PC和移动端
• 组件丰富，功能强大

组件库的组成

TinyVue 提供超过 60 个组件，覆盖基础 UI 元素（如按钮、表单）、复杂交互组件（如表格、树形控件）以及高级功能（如拖拽排序、浮动元素）。其主要组成部分包括：

• 基础组件：如 <tiny-button>、<tiny-input>，提供基本的交互元素。
• 布局组件：如 <tiny-grid>、<tiny-layout>，用于构建响应式页面结构。
• 高级组件：如 <tiny-table>（基于 vxe-table）、<tiny-tabs>（支持拖拽排序），满足复杂业务需求。
• 工具库：如 Floating UI，用于创建工具提示、弹出框等浮动元素。
• 跨框架支持：TinyVue 兼容 Vue 2 和 Vue 3，通过模块化设计支持其他框架（如 react）。

全新项目配置

在项目的根目录中，打开控制台，执行以下命令，为 Vue 3.0 的项目安装 TinyVue 组件库：

yarn add @opentiny/vue@3
# 或者
npm install @opentiny/vue@3

或者执行以下命令，为 Vue 2.0 的项目安装 TinyVue 组件库：

yarn add @opentiny/vue@2
# 或者
npm install @opentiny/vue@2

如果是Vite 工程，安装完依赖后，修改项目的 vite.config.js ，添加以下代码突出显示的部分：

// vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  define: {    'process.env': { TINY_MODE: 'pc' }  }})

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4769