OpenTiny Vue 组件库技术文档

OpenTiny Vue 组件库技术文档

【免费下载链接】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/opentiny/tiny-vue

1. 安装指南

1.1 环境要求

• Node.js 12.x 或更高版本
• npm 6.x 或更高版本
• Vue.js 2.6+ 或 Vue.js 3.x

1.2 安装方式

方式一：npm 安装（推荐）

根据您的 Vue 版本选择对应的安装命令：

# 针对 Vue 3 项目
npm i @opentiny/vue@3

# 针对 Vue 2 项目
npm i @opentiny/vue@2

方式二：CDN 引入

在 HTML 文件中直接通过 CDN 引入：

<!-- Vue 3 版本 -->
<script src="https://unpkg.com/@opentiny/vue@3"></script>

<!-- Vue 2 版本 -->
<script src="https://unpkg.com/@opentiny/vue@2"></script>

2. 使用说明

2.1 基础使用

在 Vue 项目中引入并使用组件：

<script setup>
// Vue 3 组合式 API
import { Button as TinyButton } from '@opentiny/vue'
</script>

<template>
  <tiny-button>点击按钮</tiny-button>
</template>

2.2 全局注册

如需全局注册所有组件：

import TinyVue from '@opentiny/vue'

// Vue 3
app.use(TinyVue)

// Vue 2
Vue.use(TinyVue)

2.3 主题定制

支持通过 CSS 变量定制主题样式：

:root {
  --ti-base-color-brand: #526ecc;
  --ti-base-color-primary: #526ecc;
}

3. API 使用文档

3.1 通用组件属性

所有组件均支持以下通用属性：

属性名	类型	默认值	说明
size	String	'medium'	组件尺寸，可选值：mini/small/medium/large
disabled	Boolean	false	是否禁用状态
loading	Boolean	false	是否加载中状态

3.2 常用组件示例

Button 组件

<tiny-button 
  type="primary"
  size="small"
  @click="handleClick"
>
  主要按钮
</tiny-button>

Input 组件

<tiny-input
  v-model="inputValue"
  placeholder="请输入内容"
  clearable
></tiny-input>

3.3 事件处理

所有交互组件均提供标准事件：

<tiny-button @click="handleClick">按钮</tiny-button>
<tiny-input @change="handleChange"></tiny-input>

4. 开发环境搭建

4.1 克隆项目

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

4.2 启动开发服务器

# Vue 3 开发环境
pnpm dev

# Vue 2 开发环境
pnpm dev2

4.3 访问开发环境

浏览器访问：http://127.0.0.1:7130/

4.4 构建生产版本

# 构建 Vue 3 版本
pnpm build

# 构建 Vue 2 版本
pnpm build2

5. 注意事项

1. 组件前缀默认为 tiny-，可通过配置修改
2. 国际化支持需额外引入语言包
3. 移动端适配需配置 viewport 和 rem 基准值
4. 主题定制文件需在 main.js 中优先引入

【免费下载链接】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/opentiny/tiny-vue