ViteUI 使用文档

简体中文 | English

简介

ViteUI 是一个基于 Vue 3 和 TypeScript 开发的现代化 UI 组件库，提供了丰富的企业级组件，帮助您快速构建美观、高效的 Web 应用。

特性

• 🚀 基于 Vue 3 Composition API
• 💪 使用 TypeScript 编写，提供完整的类型定义
• 📦 开箱即用的 50+ 高质量组件
• 🎨 支持主题定制
• 🌍 国际化支持
• ⚡️ 使用 Vite 构建，开发体验极佳

快速开始

环境要求

• Node.js >= 14.0.0
• Vue >= 3.2.0

安装

使用 npm

npm install viteui --save

使用 pnpm

pnpm add viteui

使用 yarn

yarn add viteui

完整引入

在 main.ts 中引入：

import { createApp } from 'vue';
import App from './App.vue';
import ViteUI from 'viteui';
import 'viteui/dist/themes/default/index.css';
import 'viteui/dist/themes/icon.css';

const app = createApp(App);
app.use(ViteUI);
app.mount('#app');

按需引入

import { createApp } from 'vue';
import App from './App.vue';
import { VuLinkButton, VuPanel, VuDataGrid } from 'viteui';
import 'viteui/dist/themes/default/index.css';
import 'viteui/dist/themes/icon.css';

const app = createApp(App);
app.component(VuLinkButton.name, VuLinkButton);
app.component(VuPanel.name, VuPanel);
app.component(VuDataGrid.name, VuDataGrid);
app.mount('#app');

开始使用

在组件中使用：

<template>
  <vu-link-button @click="handleClick">点击我</vu-link-button>
</template>

<script setup lang="ts">
const handleClick = () => {
  console.log('按钮被点击了！');
};
</script>

主题定制

ViteUI 提供了多套内置主题，您可以根据需要选择：

可用主题

• default - 默认主题
• bootstrap - Bootstrap 风格
• black - 黑色主题
• gray - 灰色主题
• metro - Metro 风格
• material - Material Design 风格
• material-blue - Material Design 蓝色
• material-teal - Material Design 青色

使用主题

// 引入主题样式
import 'viteui/dist/themes/material/index.css';
import 'viteui/dist/themes/icon.css';

国际化

ViteUI 支持多语言切换，内置了 30+ 种语言包。

使用方法

import { createApp } from 'vue';
import ViteUI from 'viteui';
import zhCN from 'viteui/dist/locale/lang-zh_CN';

const app = createApp(App);
app.use(ViteUI, {
  locale: zhCN
});

支持的语言

• zh_CN - 简体中文
• zh_TW - 繁体中文
• en - 英语
• ja - 日语
• ko - 韩语
• fr - 法语
• de - 德语
• es - 西班牙语
• 更多...

表单验证

ViteUI 提供了强大的表单验证功能。

内置验证规则

import { ValidateRules } from 'viteui';

// 添加自定义验证规则
ValidateRules.customRule = {
  validator: (value: any) => {
    return value.length >= 6;
  },
  message: '长度必须大于等于 6'
};

在表单中使用

<vu-form :model="formData" :rules="rules" ref="formRef">
  <vu-form-field name="username" label="用户名">
    <vu-text-box v-model="formData.username"></vu-text-box>
  </vu-form-field>
</vu-form>

全局配置

配置项

app.use(ViteUI, {
  locale: zhCN,           // 语言配置
  rules: {                // 自定义验证规则
    customRule: {
      validator: (value) => value.length >= 6,
      message: '长度必须大于等于 6'
    }
  }
});

常见问题

1. 样式不生效？

确保正确引入了样式文件：

import 'viteui/dist/themes/default/index.css';
import 'viteui/dist/themes/icon.css';

2. TypeScript 类型提示不完整？

确保在 tsconfig.json 中配置了正确的类型：

{
  "compilerOptions": {
    "types": ["viteui"]
  }
}

浏览器支持

• Chrome >= 90
• Firefox >= 88
• Safari >= 14
• Edge >= 90

联系我们

• 官方网站: https://www.viteui.com

感谢使用 ViteUI！ 🎉