DT Element 🌟

一套基于 Vue 3 的企业级 UI 组件库，提供高效、灵活且美观的交互解决方案。

✨ 特性

• 🚀 Vue 3 优先 - 完全基于 Composition API 构建
• 🎨 主题定制 - 支持 CSS 变量动态主题配置
• 📦 按需加载 - 支持 Tree Shaking 优化
• 🛠 TypeScript 支持 - 完整的类型定义
• 📚 完整文档 - 集成 Vitepress 文档系统

📦 安装

npm install dt-element
# 或
yarn add dt-element

🔨 快速开始

全局注册

// main.js
import { createApp } from 'vue'
import DtElement from 'dt-element'
import 'dt-element/dist/styles.css' // 引入默认样式

const app = createApp(App)
app.use(DtElement)

按需引入

在 Vue 组件中直接导入需要的组件：

<script setup>
import { Button, Tooltip } from 'dt-element'
// 单独引入组件样式（可选）
import 'dt-element/dist/es/components/Button/style.css'
import 'dt-element/dist/es/components/Tooltip/style.css'
</script>

<template>
  <Button type="primary">点击我</Button>
  <Tooltip content="提示信息">
    <span>悬停查看提示</span>
  </Tooltip>
</template>

🧩 组件列表

| 组件 | 描述 | 状态 | | ----------- | ------------ | --------- | | Button | 多功能按钮 | ✅ 稳定 | | Tooltip | 信息提示框 | ✅ 稳定 | | Icon | 图标 | 🚧 开发中 | | Form | 表单控件集合 | ✅ 稳定 | | Message | 消息提醒 | ✅ 稳定 | | 更多... | | |

🛠 开发指南

环境准备

git clone https://github.com/your-repo/dt-element.git
cd dt-element
npm install

开发命令

npm run dev          # 启动开发服务器
npm run docs:dev     # 启动文档开发模式
npm run build        # 构建生产包
npm run type-check   # 类型检查
npm run lint         # 代码规范检查

文档

npm run docs:dev     # 本地文档开发
npm run docs:build   # 构建静态文档

📄 许可证

本项目基于 MIT License 发布。

温馨提示：建议使用 Node.js 16+ 和 npm 7+ 进行开发，组件库需要 Vue 3.2+ 运行时环境。