Windoor Design Pro

基于 Ant Design Vue 的企业级组件库，提供丰富的 Vue 3 组件和设计系统。

🚀 特性

• 🎨 基于 Ant Design Vue 4.x 设计规范
• ⚡ Vue 3 + TypeScript 支持
• 🎯 企业级组件库
• 📱 响应式设计
• 🌈 可定制的主题系统
• 📚 完整的文档和示例

📁 项目结构

windoor-design-pro/
├── 📦 packages/                    # 核心包目录
│   ├── 📁 components/             # 组件源码
│   │   ├── 📁 w-button/          # Button 组件
│   │   │   ├── 📄 w-button.vue   # 组件实现
│   │   │   ├── 📄 index.ts       # 组件导出
│   │   │   └── 📄 README.md      # 组件文档
│   │   ├── 📁 w-input/           # Input 组件
│   │   └── 📄 index.ts           # 组件统一导出
│   └── 📄 index.ts               # 主入口文件
├── 📚 docs/                       # 文档站点
│   ├── 📁 .vitepress/            # VitePress 配置
│   ├── 📁 guide/                 # 指南文档
│   ├── 📁 components/            # 组件文档
│   ├── 📁 examples/              # 示例代码
│   └── 📄 index.md               # 文档首页
├── 🎮 play/                      # 在线演示
│   ├── 📁 src/                   # 演示源码
│   ├── 📄 index.html             # 演示页面
│   └── 📄 vite.config.ts         # 演示配置
├── ⚙️ 配置文件
│   ├── 📄 package.json           # 项目配置
│   ├── 📄 tsconfig.json          # TypeScript 配置
│   ├── 📄 vite.config.ts         # Vite 构建配置
│   └── 📄 .gitignore             # Git 忽略文件
└── 📄 README.md                  # 项目说明

🛠️ 技术栈

• 框架: Vue 3.5+
• 构建工具: Vite 5.x
• 类型系统: TypeScript 5.x
• UI 框架: Ant Design Vue 4.x
• 文档工具: VitePress
• 包管理: pnpm

📦 安装

# 使用 npm
npm install windoor-design-pro

# 使用 yarn
yarn add windoor-design-pro

# 使用 pnpm
pnpm add windoor-design-pro

🔧 开发环境搭建

# 克隆项目
git clone <repository-url>
cd windoor-design-pro

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 启动文档站点
pnpm dev:docs

# 启动在线演示
pnpm dev:play

📝 使用示例

全局注册

import { createApp } from 'vue'
import WindoorDesignPro from 'windoor-design-pro'
import 'windoor-design-pro/dist/style.css'

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

按需引入

import { WButton } from 'windoor-design-pro'

export default {
  components: {
    WButton
  }
}

组件使用

<template>
  <div>
    <w-button type="primary" size="large">
      主要按钮
    </w-button>
    
    <w-button type="ghost" size="middle">
      幽灵按钮
    </w-button>
    
    <w-button type="dashed" size="small">
      虚线按钮
    </w-button>
  </div>
</template>

🚀 构建

# 构建组件库
pnpm build

# 构建包
pnpm build:packages

📚 文档

• 📖 组件文档
• 🎮 在线演示
• 🚀 快速开始

🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

本项目基于 MIT 许可证开源。

🔗 相关链接

• Vue 3 官方文档
• Ant Design Vue
• Vite 官方文档
• VitePress 官方文档

📞 联系我们

如有问题或建议，请通过以下方式联系我们：

• 🐛 提交 Issue
• 💬 讨论区
• 📧 邮箱: [[email protected]]

⭐ 如果这个项目对你有帮助，请给我们一个 Star！