FE UI 组件库

基于 Vue 3 + TypeScript + Ant Design Vue 构建的企业级组件库。

✨ 特性

• 🚀 基于 Vue 3 Composition API
• 📦 基于 Ant Design Vue 4.x
• 🔧 使用 TypeScript 开发
• 📱 支持响应式设计
• 🎨 统一的组件前缀 fe-
• 📖 完整的 TypeScript 类型支持
• 🛠️ 自动发布和版本管理
• 📦 支持 Tree Shaking

📦 安装

npm install @yeepay/fe-ui

🚀 使用

完整引入

import { createApp } from 'vue'
import FeUI from '@yeepay/fe-ui'
import 'ant-design-vue/dist/reset.css'

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

按需引入

import { createApp } from 'vue'
import { FeButton, FeInput, FeCard, FeModal, FeTable } from '@yeepay/fe-ui'

const app = createApp(App)
app.component('FeButton', FeButton)
app.component('FeInput', FeInput)
app.component('FeCard', FeCard)
app.component('FeModal', FeModal)
app.component('FeTable', FeTable)
app.mount('#app')

🎯 组件列表

FeButton 按钮组件

<template>
  <fe-button type="primary" @click="handleClick">
    点击按钮
  </fe-button>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击')
}
</script>

Props:

• type: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'
• size: 'large' | 'middle' | 'small'
• loading: boolean
• disabled: boolean
• ghost: boolean
• block: boolean
• icon: string
• shape: 'default' | 'circle' | 'round'
• htmlType: 'button' | 'submit' | 'reset'

FeInput 输入框组件

<template>
  <fe-input 
    v-model:model-value="value" 
    placeholder="请输入内容"
    :allow-clear="true"
    :show-count="true"
  />
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

Props:

• modelValue: string
• placeholder: string
• disabled: boolean
• size: 'large' | 'middle' | 'small'
• maxlength: number
• showCount: boolean
• allowClear: boolean
• prefix: string
• suffix: string
• addonBefore: string
• addonAfter: string
• type: 'text' | 'password' | 'number' | 'email' | 'url' | 'tel'

FeCard 卡片组件

<template>
  <fe-card title="卡片标题" :hoverable="true">
    <template #extra>
      <fe-button type="link">更多</fe-button>
    </template>
    卡片内容
  </fe-card>
</template>

Props:

• title: string
• bordered: boolean
• size: 'default' | 'small'
• loading: boolean
• hoverable: boolean
• cover: string
• actions: string[]
• tabList: Array<{ key: string; tab: string }>
• activeTabKey: string
• headStyle: Record<string, any>
• bodyStyle: Record<string, any>

FeModal 模态框组件

<template>
  <fe-modal v-model:open="visible" title="模态框标题" @ok="handleOk">
    <p>模态框内容</p>
  </fe-modal>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)

const handleOk = () => {
  visible.value = false
}
</script>

Props:

• open: boolean
• title: string
• width: number | string
• centered: boolean
• closable: boolean
• maskClosable: boolean
• keyboard: boolean
• destroyOnClose: boolean
• confirmLoading: boolean
• okText: string
• cancelText: string
• okType: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'
• cancelButtonProps: Record<string, any>
• okButtonProps: Record<string, any>

FeTable 表格组件

<template>
  <fe-table 
    :columns="columns" 
    :data-source="dataSource"
    :pagination="{ pageSize: 10 }"
  />
</template>

<script setup>
const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '地址', dataIndex: 'address', key: 'address' }
]

const dataSource = [
  { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
  { key: '2', name: '李四', age: 42, address: '上海市浦东新区' }
]
</script>

Props:

• columns: any[]
• dataSource: any[]
• pagination: false | any
• loading: boolean
• rowKey: string | ((record: any) => string)
• scroll: { x?: number | string; y?: number | string }
• size: 'small' | 'middle' | 'large'
• bordered: boolean
• rowSelection: object

🛠️ 开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 类型检查
npm run type-check

# 代码检查
npm run lint

📤 发布

简化发布（推荐）

# 小版本更新 (1.0.0 -> 1.0.1)
npm run release:patch

# 次版本更新 (1.0.0 -> 1.1.0)
npm run release:minor

# 主版本更新 (1.0.0 -> 2.0.0)
npm run release:major

# 默认小版本更新
npm run release

完整发布（包含 Git 操作）

# 小版本更新
npm run publish:patch

# 次版本更新
npm run publish:minor

# 主版本更新
npm run publish:major

# 默认小版本更新
npm run publish

📁 项目结构

fe-ui/
├── src/
│   ├── components/          # 组件目录
│   │   ├── FeButton.vue    # 按钮组件
│   │   ├── FeInput.vue     # 输入框组件
│   │   ├── FeCard.vue      # 卡片组件
│   │   ├── FeModal.vue     # 模态框组件
│   │   └── FeTable.vue     # 表格组件
│   ├── App.vue             # 示例应用
│   ├── main.ts             # 应用入口
│   └── index.ts            # 组件库入口
├── scripts/                # 脚本目录
│   ├── publish.sh          # 完整发布脚本
│   └── publish-simple.sh   # 简化发布脚本
├── dist/                   # 构建输出目录
├── package.json            # 项目配置
├── vite.config.ts          # Vite 开发配置
├── vite.lib.config.ts      # Vite 库构建配置
├── tsconfig.json           # TypeScript 配置
├── .eslintrc.js            # ESLint 配置
├── README.md               # 项目说明
└── PUBLISH.md              # 发布指南

🔗 相关链接

• NPM 包
• GitLab 仓库
• 发布指南

📄 许可证

MIT License