Vue3 Ant Design Component Library

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

功能特性

• 🚀 基于Vue3 Composition API
• 🎨 集成Ant Design Vue组件库
• 🧩 包含自定义组件（MyButton、MyCard、IpsaLogo、IpsaDivider、IpsaBadge、IpsaIcon）
• 📦 支持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, IpsaLogo, IpsaDivider, IpsaBadge, IpsaIcon } from 'vue3-antd-component'

自定义组件

IpsaLogo Logo组件

一个灵活的Logo组件，支持六种不同的图片类型和自定义尺寸。

<template>
  <!-- 有背景色的Logo -->
  <IpsaLogo type="default" :hasBackground="true" :size="100" />
  <IpsaLogo type="text" :hasBackground="true" :size="120" />
  <IpsaLogo type="all" :hasBackground="true" :size="150" />

  <!-- 无背景色的Logo -->
  <IpsaLogo type="default" :hasBackground="false" :size="100" />
  <IpsaLogo type="text" :hasBackground="false" :size="120" />
  <IpsaLogo type="all" :hasBackground="false" :size="150" />
</template>

Props

图片类型说明

• default: 默认Logo样式
• text: 包含文字的Logo样式
• all: 完整的Logo样式
• hasBackground:
  • true: 使用有红色背景(#D71921)的图片 (bj-xxx.svg)
  • false: 使用透明背景的图片 (no-bj-xxx.svg)

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

IpsaDivider 分割线组件

一个灵活的分割线组件，支持自定义颜色、宽度和边距。

<template>
  <!-- 基本用法 -->
  <p>这是一段文字</p>
  <IpsaDivider />
  <p>这是另一段文字</p>

  <!-- 自定义颜色和宽度 -->
  <IpsaDivider color="#1890ff" width="50%" />

  <!-- 自定义边距 -->
  <IpsaDivider color="red" :width="200" margin-top="20px" :margin-bottom="20" />
</template>

Props

IpsaBadge 徽标组件

一个功能丰富的徽标组件，支持数字、文字、状态等多种类型。

<template>
  <!-- 数字徽标 -->
  <IpsaBadge :count="5">
    <div class="badge-content">消息</div>
  </IpsaBadge>

  <!-- 文字徽标 -->
  <IpsaBadge text="NEW">
    <div class="badge-content">新功能</div>
  </IpsaBadge>

  <!-- 状态徽标 -->
  <IpsaBadge status="success">
    <div class="badge-content">成功</div>
  </IpsaBadge>

  <!-- 动画徽标 -->
  <IpsaBadge :count="5" :animated="true">
    <div class="badge-content">动画</div>
  </IpsaBadge>
</template>

Props

Status 可选值

• success - 成功状态
• processing - 处理中状态
• default - 默认状态
• error - 错误状态
• warning - 警告状态

IpsaIcon 图标组件

基于 iconfont 的图标组件，支持所有 IPSA 规范图标库中的图标。

<template>
  <!-- 基础图标 -->
  <IpsaIcon name="searchsousuo" />

  <!-- 指定大小和颜色 -->
  <IpsaIcon name="searchsousuo" :size="24" color="#1890ff" />

  <!-- 可点击图标 -->
  <IpsaIcon 
    name="searchsousuo" 
    :clickable="true"
    @click="handleClick"
  />

  <!-- 旋转图标 -->
  <IpsaIcon name="refreshshuaxin" :rotate="45" />
</template>

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        # 自定义卡片组件
│   │   ├── IpsaLogo.vue      # Logo组件
│   │   ├── IpsaDivider.vue   # 分割线组件
│   │   ├── IpsaBadge.vue     # 徽标组件
│   │   └── IpsaIcon.vue      # 图标组件
│   ├── main.js               # 开发环境入口
│   ├── index.js              # 库打包入口
│   └── App.vue               # 主应用组件
├── assets/
│   └── font/                 # 图标字体文件
├── docs/                     # 组件文档
├── vite.config.js            # 开发环境配置
├── vite.lib.config.js        # 库打包配置
├── package.json              # 项目配置
└── README.md                # 项目文档

许可证

MIT