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



- 🚀 基于 Vue 3 Composition API
- 📦 基于 Ant Design Vue 4.x
- 🔧 使用 TypeScript 开发
- 📱 支持响应式设计
- 🎨 统一的组件前缀 fe-
- 📖 完整的 TypeScript 类型支持
- 🛠️ 自动发布和版本管理
- 📦 支持 Tree Shaking
``bash`
npm install @yeepay/fe-ui
`typescript
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')
`
`typescript
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')
`
`vue
点击按钮
`
Props:
- type: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'size
- : 'large' | 'middle' | 'small'loading
- : booleandisabled
- : booleanghost
- : booleanblock
- : booleanicon
- : stringshape
- : 'default' | 'circle' | 'round'htmlType
- : 'button' | 'submit' | 'reset'
`vue
placeholder="请输入内容"
:allow-clear="true"
:show-count="true"
/>
`
Props:
- modelValue: stringplaceholder
- : stringdisabled
- : booleansize
- : 'large' | 'middle' | 'small'maxlength
- : numbershowCount
- : booleanallowClear
- : booleanprefix
- : stringsuffix
- : stringaddonBefore
- : stringaddonAfter
- : stringtype
- : 'text' | 'password' | 'number' | 'email' | 'url' | 'tel'
`vue`
卡片内容
Props:
- title: stringbordered
- : booleansize
- : 'default' | 'small'loading
- : booleanhoverable
- : booleancover
- : stringactions
- : string[]tabList
- : Array<{ key: string; tab: string }>activeTabKey
- : stringheadStyle
- : RecordbodyStyle
- : Record
` 模态框内容vue
`
Props:
- open: booleantitle
- : stringwidth
- : number | stringcentered
- : booleanclosable
- : booleanmaskClosable
- : booleankeyboard
- : booleandestroyOnClose
- : booleanconfirmLoading
- : booleanokText
- : stringcancelText
- : stringokType
- : 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'cancelButtonProps
- : RecordokButtonProps
- : Record
`vue
:data-source="dataSource"
:pagination="{ pageSize: 10 }"
/>
`
Props:
- columns: any[]dataSource
- : any[]pagination
- : false | anyloading
- : booleanrowKey
- : string | ((record: any) => string)scroll
- : { x?: number | string; y?: number | string }size
- : 'small' | 'middle' | 'large'bordered
- : booleanrowSelection
- : object
`bash安装依赖
npm install
📤 发布
$3
`bash
小版本更新 (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
`$3
`bash
小版本更新
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 # 发布指南
``MIT License