Vue3 Ant Design Component Library

一个基于Vue3和Ant Design Vue的组件库，包含自定义组件，可以打包发布到npm。

功能特性

• 🚀 基于Vue3 Composition API
• 🎨 集成Ant Design Vue组件库
• 🧩 包含自定义组件（MyButton、MyCard）
• 📦 支持npm打包发布
• 🔧 完整的开发环境配置
• 📝 ESLint + Prettier代码规范

安装

npm install vue3-antd-component

使用方法

全局引入

import { createApp } from 'vue'
import Vue3AntdComponent from 'vue3-antd-component'
import 'ant-design-vue/dist/reset.css'

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

按需引入

import { Button, Input, Form, MyButton, MyCard } from 'vue3-antd-component'

自定义组件

MyButton 按钮组件

一个功能丰富的自定义按钮组件，支持多种类型、尺寸和状态。

<template>
  <!-- 基本用法 -->
  <my-button type="primary" @click="handleClick">主要按钮</my-button>
  <my-button type="success">成功按钮</my-button>
  <my-button type="warning">警告按钮</my-button>
  <my-button type="danger">危险按钮</my-button>
  <my-button type="default">默认按钮</my-button>

  <!-- 不同尺寸 -->
  <my-button size="small">小按钮</my-button>
  <my-button size="medium">中按钮</my-button>
  <my-button size="large">大按钮</my-button>

  <!-- 特殊状态 -->
  <my-button round>圆角按钮</my-button>
  <my-button disabled>禁用按钮</my-button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了！')
    }
  }
}
</script>

Props

Events

MyCard 卡片组件

一个灵活的卡片组件，支持自定义标题、内容和操作区域。

<template>
  <!-- 基本用法 -->
  <my-card title="卡片标题">
    <p>这是卡片的内容区域</p>
    <template #footer>
      <a-button size="small">操作1</a-button>
      <a-button size="small" type="primary">操作2</a-button>
    </template>
  </my-card>

  <!-- 不同阴影效果 -->
  <my-card title="悬停阴影" shadow="hover">
    <p>悬停时显示阴影</p>
  </my-card>

  <my-card title="无边框" :bordered="false" shadow="never">
    <p>没有边框和阴影</p>
  </my-card>
</template>

Props

Slots

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build:lib

# 代码检查
npm run lint

# 代码格式化
npm run format

发布到npm

1. 更新package.json中的版本号
2. 构建库：npm run build:lib
3. 登录npm：npm login
4. 发布：npm publish

项目结构

├── src/
│   ├── components/
│   │   ├── MyButton.vue    # 自定义按钮组件
│   │   └── MyCard.vue      # 自定义卡片组件
│   ├── main.js             # 开发环境入口
│   ├── index.js            # 库打包入口
│   └── App.vue             # 主应用组件
├── vite.config.js          # 开发环境配置
├── vite.lib.config.js      # 库打包配置
├── package.json            # 项目配置
└── README.md              # 项目文档

许可证

MIT