快速开始

介绍

ByComponents V3 是一个基于 Vue 3 的现代化组件库，提供了丰富的 UI 组件和工具函数，帮助开发者快速构建高质量的前端应用。

特性

• 🚀 Vue 3 驱动 - 基于 Vue 3 Composition API 构建
• 📦 TypeScript 支持 - 完整的 TypeScript 类型定义
• 🎨 现代化设计 - 采用现代化的设计语言
• ⚡ 高性能 - 基于 Vite 构建，支持 Tree Shaking
• 🔧 易于使用 - 提供详细的文档和示例

安装

使用 npm

npm install @weitutech/by-components-v3

使用 yarn

yarn add @weitutech/by-components-v3

使用 pnpm

pnpm add @weitutech/by-components-v3

使用

完整引入

import { createApp } from 'vue'
import ByComponentsV3 from '@weitutech/by-components-v3'
import 'by-components-v3/dist/style.css'

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

按需引入

import { createApp } from 'vue'
import { ByForm, ByTable, ByPager } from '@weitutech/by-components-v3'
import 'by-components-v3/dist/style.css'

const app = createApp(App)

app.component('ByForm', ByForm)
app.component('ByTable', ByTable)
app.component('ByPager', ByPager)

app.mount('#app')

基础示例

<template>
  <div>
    <by-form :model="formData" :rules="rules">
      <by-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" />
      </by-form-item>
      <by-form-item>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </by-form-item>
    </by-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const formData = reactive({
  username: '',
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
}

const handleSubmit = () => {
  console.log('提交数据:', formData)
}
</script>

下一步

• 查看 组件文档 了解所有可用组件
• 阅读 使用指南 了解更多用法
• 查看 安装指南 了解详细配置