从0到1掌握 TinyVue：企业级双框架UI组件库全攻略
项目地址: https://gitcode.com/opentiny/tiny-vue 为什么选择TinyVue？企业开发的终极解决方案
你是否还在为Vue2/Vue3项目需要维护两套UI组件库而烦恼？是否正在寻找同时支持PC端和移动端的统一组件方案？TinyVue作为OpenTiny社区推出的企业级UI组件库，以"一套代码适配多端多框架"的创新架构，彻底解决了这些痛点。
本文将带你全面掌握这个拥有104个高质量组件、支持主题定制、国际化和低代码开发的强大工具。读完本文后，你将能够：
- 快速搭建支持Vue2/Vue3的跨版本项目
- 实现PC与移动端的自适应界面开发
- 定制符合企业品牌的主题样式
- 掌握高级组件的性能优化技巧
- 参与开源社区贡献
核心架构解析：TinyVue的技术创新
TinyVue采用创新的"无渲染组件(Renderless Components)"架构，将组件逻辑与UI渲染完全分离，实现了真正的跨框架兼容。
这种架构带来三大优势：
- 跨框架兼容性：同一套核心逻辑适配Vue2/Vue3
- 多端适配：通过不同的表现层实现PC/移动端差异化渲染
- 灵活定制：业务方可自定义组件UI而不影响核心逻辑
快速上手：5分钟搭建开发环境
1. 安装TinyVue
根据你的Vue版本选择对应的安装命令：
# Vue3项目
npm i @opentiny/vue@3
# Vue2项目
npm i @opentiny/vue@2
2. 基础使用示例
以Button组件为例，展示在Vue3中的使用方法：
<template>
<div class="tiny-demo">
<tiny-button>默认按钮</tiny-button>
<tiny-button type="primary">主要按钮</tiny-button>
<tiny-button type="success">成功按钮</tiny-button>
<tiny-button type="info">信息按钮</tiny-button>
<tiny-button type="warning">警告按钮</tiny-button>
<tiny-button type="danger">危险按钮</tiny-button>
</div>
</template>
<script setup>
import { Button as TinyButton } from '@opentiny/vue'
</script>
3. 完整引入与按需加载
完整引入（适合初学者）：
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import TinyVue from '@opentiny/vue'
import '@opentiny/vue-theme/theme-default/index.css'
createApp(App).use(TinyVue).mount('#app')
按需加载（适合生产环境）：
// 仅导入需要的组件
import { Button, Input } from '@opentiny/vue'
核心组件实战：从基础到高级
数据表格组件：企业级数据展示解决方案
TinyVue的Grid组件基于vxe-table开发，提供了强大的数据处理能力：
<template>
<tiny-grid
v-model:data="tableData"
:columns="columns"
:pager-config="pagerConfig"
:checkbox-config="{ checkRowKeys: selectedRows }"
@checkbox-change="handleCheckboxChange"
></tiny-grid>
</template>
<script setup>
import { ref } from 'vue'
import { Grid } from '@opentiny/vue'
const tableData = ref([
{ id: 1, name: '张三', age: 28, position: '前端工程师' },
{ id: 2, name: '李四', age: 32, position: '产品经理' }
])
const columns = [
{ type: 'checkbox', width: 60 },
{ field: 'name', title: '姓名', sortable: true },
{ field: 'age', title: '年龄', sortable: true },
{ field: 'position', title: '职位' }
]
const pagerConfig = {
pageSize: 10,
total: 100,
pageSizes: [5, 10, 20]
}
const selectedRows = ref([])
const handleCheckboxChange = (params) => {
selectedRows.value = params.checkRowKeys
}
</script>
表单组件：企业级数据收集利器
TinyVue的Form组件支持复杂表单逻辑，包括数据验证、动态表单等高级功能：
<template>
<tiny-form
ref="formRef"
:model="formData"
:rules="rules"
label-width="100px"
>
<tiny-form-item label="用户名" prop="username">
<tiny-input v-model="formData.username" placeholder="请输入用户名"></tiny-input>
</tiny-form-item>
<tiny-form-item label="密码" prop="password">
<tiny-input type="password" v-model="formData.password" placeholder="请输入密码"></tiny-input>
</tiny-form-item>
<tiny-form-item label="邮箱" prop="email">
<tiny-input v-model="formData.email" placeholder="请输入邮箱"></tiny-input>
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="submitForm">提交</tiny-button>
<tiny-button @click="resetForm">重置</tiny-button>
</tiny-form-item>
</tiny-form>
</template>
<script setup>
import { ref } from 'vue'
import { Form, FormItem, Input, Button } from '@opentiny/vue'
const formRef = ref(null)
const formData = ref({
username: '',
password: '',
email: ''
})
const rules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码长度不能小于 6 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
]
})
const submitForm = () => {
formRef.value.validate((valid) => {
if (valid) {
alert('表单验证通过')
} else {
alert('表单验证失败')
return false
}
})
}
const resetForm = () => {
formRef.value.resetFields()
}
</script>
多端适配：一套代码适配PC与移动端
TinyVue创新性地实现了"一套代码，多端运行"的能力，通过响应式设计和设备检测，自动适配不同屏幕尺寸。
响应式布局实现
<template>
<tiny-row>
<tiny-col :span="24" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
<div class="grid-content">col-24</div>
</tiny-col>
<tiny-col :span="24" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
<div class="grid-content">col-24</div>
</tiny-col>
<!-- 更多列... -->
</tiny-row>
</template>
<style>
.grid-content {
height: 36px;
line-height: 36px;
text-align: center;
background-color: #f5f5f5;
}
</style>
移动端适配方案
TinyVue提供了专门的移动端组件模式，通过设置mode属性切换：
<template>
<!-- 自动检测设备 -->
<tiny-button :mode="isMobile ? 'mobile' : 'pc'">自适应按钮</tiny-button>
<!-- 强制移动端模式 -->
<tiny-list mode="mobile">
<tiny-list-item title="列表项1" description="这是列表项描述"></tiny-list-item>
<tiny-list-item title="列表项2" description="这是列表项描述"></tiny-list-item>
</tiny-list>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Button, List, ListItem } from '@opentiny/vue'
const isMobile = ref(false)
onMounted(() => {
// 检测设备类型
isMobile.value = /mobile/i.test(navigator.userAgent)
})
</script>
主题定制：打造企业专属UI风格
TinyVue提供了灵活的主题定制能力，支持通过CSS变量、SCSS变量和主题包三种方式定制主题。
使用CSS变量快速定制
/* 在项目全局样式中覆盖CSS变量 */
:root {
/* 主色调 */
--tiny-color-primary: #1890ff;
/* 成功色 */
--tiny-color-success: #52c41a;
/* 警告色 */
--tiny-color-warning: #faad14;
/* 危险色 */
--tiny-color-danger: #ff4d4f;
/* 信息色 */
--tiny-color-info: #1890ff;
/* 字体大小 */
--tiny-font-size-base: 14px;
--tiny-font-size-sm: 12px;
--tiny-font-size-lg: 16px;
/* 边框半径 */
--tiny-border-radius-base: 4px;
--tiny-border-radius-sm: 2px;
--tiny-border-radius-lg: 8px;
}
高级主题包开发
对于需要深度定制的企业，TinyVue支持开发独立的主题包：
# 创建主题包项目
npx @opentiny/cli create-theme my-theme
# 开发主题
cd my-theme
npm run dev
# 构建主题包
npm run build
# 发布到npm
npm publish
在项目中使用自定义主题：
// main.js
import '@opentiny/vue-theme/my-theme/index.css'
性能优化：打造高性能Vue应用
组件懒加载
TinyVue支持组件级别的按需加载，有效减小初始包体积：
// 按需导入组件
import { Button as TinyButton } from '@opentiny/vue/button'
import { Input as TinyInput } from '@opentiny/vue/input'
// 或者使用动态导入
const Dialog = () => import('@opentiny/vue/dialog')
虚拟滚动列表
对于大数据列表，使用虚拟滚动可以显著提升性能：
<template>
<tiny-virtual-list
:data="bigDataList"
:height="500"
:item-size="60"
:buffer="5"
>
<template #default="{ item }">
<div class="list-item">
<h3>{{ item.title }}</h3>
<p>{{ item.description }}</p>
</div>
</template>
</tiny-virtual-list>
</template>
<script setup>
import { ref } from 'vue'
import { VirtualList } from '@opentiny/vue'
// 模拟大数据集
const bigDataList = ref(Array.from({ length: 10000 }, (_, i) => ({
id: i,
title: `列表项 ${i + 1}`,
description: `这是第 ${i + 1} 项的描述内容`
})))
</script>
国际化：支持全球业务拓展
TinyVue内置完善的国际化支持，已覆盖20+种语言，并支持自定义语言包。
全局配置
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import TinyVue from '@opentiny/vue'
import zhCN from '@opentiny/vue-locale/lang/zh-CN'
import enUS from '@opentiny/vue-locale/lang/en-US'
import jaJP from '@opentiny/vue-locale/lang/ja-JP'
const app = createApp(App)
app.use(TinyVue, {
locale: {
// 默认语言
currentLocale: 'zh-CN',
// 语言包
messages: {
'zh-CN': zhCN,
'en-US': enUS,
'ja-JP': jaJP
}
}
})
app.mount('#app')
切换语言
<template>
<div>
<tiny-select v-model="currentLang" @change="changeLanguage">
<tiny-option value="zh-CN">简体中文</tiny-option>
<tiny-option value="en-US">English</tiny-option>
<tiny-option value="ja-JP">日本語</tiny-option>
</tiny-select>
<p>{{ $t('common.confirm') }}</p>
<p>{{ $t('common.cancel') }}</p>
<p>{{ $t('common.ok') }}</p>
</div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
import { Select, Option } from '@opentiny/vue'
const { proxy } = getCurrentInstance()
const currentLang = ref('zh-CN')
const changeLanguage = (lang) => {
proxy.$tinyLocale.changeLanguage(lang)
}
</script>
自定义语言包
// src/locale/fr-FR.js
export default {
common: {
confirm: 'Confirmer',
cancel: 'Annuler',
ok: 'OK',
close: 'Fermer',
loading: 'Chargement...'
},
button: {
submit: 'Soumettre',
reset: 'Réinitialiser',
search: 'Rechercher',
add: 'Ajouter'
}
// 更多翻译...
}
// 在main.js中注册
import frFR from './src/locale/fr-FR'
app.use(TinyVue, {
locale: {
messages: {
'fr-FR': frFR
}
}
})
从源码到贡献：参与TinyVue开源社区
环境搭建
# 克隆仓库
git clone https://gitcode.com/opentiny/tiny-vue
# 进入项目目录
cd tiny-vue
# 安装依赖
pnpm install
# 开发Vue3版本
pnpm dev
# 开发Vue2版本
pnpm dev2
组件开发流程
- 在
packages/renderless/src目录下创建组件逻辑 - 在
packages/vue/src目录下创建Vue组件 - 编写TypeScript类型定义（
*.type.ts） - 添加单元测试（
__tests__目录） - 编写文档和示例
提交PR规范
TinyVue采用Angular提交规范：
# 格式：<type>(<scope>): <subject>
git commit -m "feat(button): add disabled style"
git commit -m "fix(table): fix the pagination bug"
git commit -m "docs: update README.md"
提交类型包括：
- feat: 新功能
- fix: 修复bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 代码重构
- test: 添加测试
- chore: 构建过程或辅助工具变动
企业级最佳实践
大型项目目录结构
src/
├── assets/ # 静态资源
├── components/ # 业务组件
│ ├── common/ # 通用业务组件
│ ├── form/ # 表单相关组件
│ └── list/ # 列表相关组件
├── config/ # 配置文件
├── hooks/ # 自定义hooks
├── i18n/ # 国际化配置
├── router/ # 路由配置
├── store/ # 状态管理
├── styles/ # 全局样式
│ ├── theme/ # 主题定制
│ └── variables.scss # 样式变量
├── utils/ # 工具函数
├── views/ # 页面组件
├── App.vue # 应用入口组件
└── main.js # 入口文件
主题定制方案
对于中大型企业，建议采用以下主题定制策略：
- 建立企业设计系统，定义基础设计规范
- 基于TinyVue开发企业专属主题包
- 通过npm私有仓库管理主题包
- 在项目中统一引入定制主题
性能监控与优化
- 使用
@opentiny/vue-utils中的性能监控工具：
import { performance } from '@opentiny/vue-utils'
// 监控组件渲染时间
performance.mark('component-render-start')
// ... 组件渲染代码 ...
performance.mark('component-render-end')
performance.measure('component-render-time', 'component-render-start', 'component-render-end')
- 使用Vue Devtools分析组件性能
- 定期进行Lighthouse性能审计
总结与展望
TinyVue作为一款企业级UI组件库，通过创新的无渲染组件架构，成功解决了多框架、多端适配的难题。其丰富的组件库、完善的类型定义、灵活的主题定制能力和优秀的性能表现，使其成为企业级Vue项目的理想选择。
随着Web技术的发展，TinyVue团队将继续专注于：
- 提升组件的可访问性(ARIA)
- 增强低代码平台支持能力
- 优化移动端体验
- AI辅助开发工具集成
无论你是个人开发者还是企业团队，TinyVue都能为你的项目提供强大支持。立即访问官方仓库，开始你的高效开发之旅！
如果你觉得本文对你有帮助，请点赞、收藏并关注OpenTiny社区，我们将持续推出更多优质内容！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
