你好，我是 Kagol，个人公众号：前端开源星球。

本文主要介绍 TinyVue 组件的基本使用模式，包括安装方法、导入策略和实际示例。你将学习如何高效地将组件集成到 Vue 2 或 Vue 3 应用程序中。

组件导入方法

TinyVue 提供多种导入策略以满足不同项目需求。主入口文件 packages/vue/index.ts 导出了所有 200 多个组件，同时支持原始名称和 Tiny 前缀名称，实现灵活的使用模式。

安装选项

方式	使用场景	打包体积
完整导入	快速原型开发、小型项目	最大
按模式导入	PC 或移动优先应用	中等
按需导入	生产环境应用	最小

完整安装

使用 install 函数全局安装所有组件。此方法将所有组件注册到 Vue 应用中，使其在整个应用中可用。

import { createApp } from 'vue'
import TinyVue from '@opentiny/vue'
 
const app = createApp(App)
app.use(TinyVue)

安装函数支持自定义前缀和别名，允许你根据项目约定为组件添加命名空间。

全局切换

通过在 Vue 的原型上全局设置tiny_mode，可以指定所有同名组件的默认模式。
在项目入口  src/main.js  文件中导入 Vue 依赖后，增加如下配置：

// PC 模式
app.config.globalProperties.tiny_mode = { value: 'pc' }

// 移动优先模式
app.config.globalProperties.tiny_mode = { value: 'mobile-first' }

PC 入口点包含 170 多个桌面优化组件，而移动优先变体提供 110 多个移动优化组件，具有触摸友好的交互。

tiny_mode 全局属性（由按模式导入自动设置）使组件能够应用平台特定的样式和行为。这对于具有显著移动变体的组件尤为重要。

注意使用移动优化组件之前需要先安装对应的主题包：

npm install @opentiny/vue-theme-saas @opentiny/vue-icon-saas @opentiny/vue-common-saas

并配置包别名：

// (vite) vite.config.js
export default defineConfig({
  resolve: {
    alias: {
      '@opentiny/vue-theme': '@opentiny/vue-theme-saas',
      '@opentiny/vue-icon': '@opentiny/vue-icon-saas',
      '@opentiny/vue-common': '@opentiny/vue-common-saas'
    }
  }
})

按需组件导入

为了获得最佳打包体积，仅导入你需要的组件。每个组件都从 @opentiny/vue-{component-name} 包中单独导出。

// 导入特定组件
import { Button, Input, Form } from '@opentiny/vue'
 
// 或使用 Tiny 前缀导入以提高清晰度
import { TinyButton, TinyInput, TinyForm } from '@opentiny/vue'
 
// 从组件包导入
import TinyButton from '@opentiny/vue-button'

组件命名约定

所有组件都支持双重命名：原始名称（如 Button）和 Tiny 前缀别名（如 TinyButton）。这种灵活性适应不同的命名偏好，并帮助避免与其他库的冲突。

原始名称	Tiny 前缀	描述
Button	TinyButton	标准按钮组件
Input	TinyInput	文本输入字段
Form	TinyForm	带验证的表单容器
Select	TinySelect	下拉选择器

基本组件分类

TinyVue 组件按逻辑类别组织。了解这些类别有助于你找到所需的组件。

使用示例

基础组件

基础组件提供基本的 UI 元素。以下是使用 Button 和 Input 组件的示例：

<template>
  <div>
    <tiny-button type="primary" @click="handleSubmit">
      提交
    </tiny-button>
    <tiny-input v-model="username" placeholder="输入用户名" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
import { TinyButton, TinyInput } from '@opentiny/vue'
 
const username = ref('')
const handleSubmit = () => {
  console.log('已提交:', username.value)
}
</script>

表单组件

表单组件协同工作创建经过验证的数据输入界面。Form 组件提供验证规则和自动错误处理。

<template>
  <tiny-form :model="formData" :rules="rules" ref="formRef">
    <tiny-form-item label="邮箱" prop="email">
      <tiny-input v-model="formData.email" />
    </tiny-form-item>
    <tiny-form-item label="密码" prop="password">
      <tiny-input v-model="formData.password" type="password" />
    </tiny-form-item>
    <tiny-form-item>
      <tiny-button type="primary" @click="submitForm">登录</tiny-button>
    </tiny-form-item>
  </tiny-form>
</template>
 
<script setup>
import { reactive, ref } from 'vue'
import { TinyForm, TinyFormItem, TinyInput, TinyButton } from '@opentiny/vue'
 
const formRef = ref()
const formData = reactive({
  email: '',
  password: ''
})
 
const rules = {
  email: [{ required: true, message: '邮箱为必填项' }],
  password: [{ required: true, message: '密码为必填项' }]
}
 
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('表单验证通过:', formData)
    }
  })
}
</script>

数据展示组件

Table 和 Grid 组件提供强大的数据展示功能，支持排序、过滤和分页。

<template>
  <tiny-grid :data="tableData" :pager="pager">
    <tiny-grid-column field="name" title="姓名" />
    <tiny-grid-column field="age" title="年龄" />
    <tiny-grid-column field="address" title="地址" />
  </tiny-grid>
</template>
 
<script setup>
import { ref } from 'vue'
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'
 
const tableData = ref([
  { name: 'John', age: 30, address: '纽约' },
  { name: 'Jane', age: 25, address: '伦敦' }
])
 
const pager = {
  pageSize: 10,
  currentPage: 1
}
</script>

组件属性和事件

每个组件都暴露了控制其行为的属性和事件。API 文档提供了全面的参数定义。

Button 组件示例

Button 组件支持多种类型、大小和状态：

属性	类型	默认值	描述
type	String	'default'	按钮类型：primary, success, warning, danger
size	String	'medium'	按钮大小：small, medium, large
disabled	Boolean	false	是否禁用按钮
loading	Boolean	false	显示加载状态
icon	String/Component	''	按钮图标

<tiny-button type="primary" size="large" :loading="isLoading">
  点击我
</tiny-button>

平台注意事项

为多个平台开发时，使用平台特定的入口点以确保最佳的组件行为。

PC 与移动组件功能对比

功能	PC 模式	移动优先模式
触摸事件	可选	优化
布局	以桌面为中心	响应式
组件变体	完整集	移动优化子集
交互	鼠标/键盘	触摸优先

// 基于平台的条件导入
import { Button } from '@opentiny/vue'
import { Button as MobileButton } from '@opentiny/vue-mobile'
import { browserInfo } from '@opentiny/utils'
 
const Component = browserInfo.isMobile() ? MobileButton : Button

联系我们

GitHub：https://github.com/opentiny/tiny-vue（欢迎 Star ⭐）

官网：https://opentiny.design/tiny-vue

个人博客：kagol.com.cn

小助手微信：opentiny-official

公众号：OpenTiny