ZZD-UI

一个基于 Vue 3 的轻量级组件库，集成了 Element Plus，提供了更多实用的业务组件。

特性

• 🚀 基于 Vue 3 和 Element Plus
• 📦 支持按需引入
• 🎨 继承 Element Plus 的主题系统
• 💪 使用 JavaScript 编写，但提供完整的 TypeScript 类型支持
• 🔧 提供完整的组件创建工具

安装

npm install zzd-ui
# 或者
yarn add zzd-ui
# 或者
pnpm add zzd-ui

快速开始

完整引入

import { createApp } from 'vue'
import ZzdUI from 'zzd-ui'
import 'zzd-ui/dist/style.css'

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

按需引入

import { MyComponent } from 'zzd-ui'
import 'zzd-ui/dist/style.css'

export default {
  components: {
    MyComponent
  }
}

TypeScript 支持

虽然该组件库使用 JavaScript 编写，但我们提供了完整的 TypeScript 类型声明文件，可以在 TypeScript 项目中获得完整的类型提示和类型检查。

import { MyComponent } from 'zzd-ui'

// 会获得完整的类型提示
const props = {
  title: 'Hello',
  size: 'small' // 会有自动补全提示：'small' | 'medium' | 'large'
}

开发指南

项目结构

zzd-ui/
├── src/
│   ├── components/     # 组件目录
│   └── index.js       # 入口文件
├── types/
│   └── index.d.ts     # 类型声明文件
├── scripts/
│   └── create-component.js  # 组件创建脚本
└── package.json

创建新组件

我们提供了一个方便的组件创建工具，可以快速创建新组件：

npm run create ComponentName

例如，创建一个按钮组件：

npm run create ZButton

这个命令会自动：

1. 在 src/components 目录下创建组件文件
2. 在入口文件中注册组件
3. 更新类型声明文件

创建的组件结构如下：

<template>
  <div class="zbutton">
    <!-- 组件内容 -->
  </div>
</template>

<script setup>
defineOptions({
  name: 'ZButton'
})
</script>

<style lang="scss" scoped>
.zbutton {
  // 样式内容
}
</style>

开发命令

# 开发环境
npm run dev

# 构建
npm run build

# 预览构建结果
npm run preview

# 创建新组件
npm run create ComponentName

依赖版本

• Vue: ^3.4.0
• Element Plus: ^2.5.6
• Day.js: ^1.11.10
• Lodash-es: ^4.17.21

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 13
• Edge >= 88

许可证

MIT