GVS Component Library

基于 Element Plus 的 Vue 3 组件库，使用 TypeScript 和 pnpm 构建。

特性

• 🚀 基于 Vue 3 + TypeScript
• 🎨 基于 Element Plus 二次开发
• 📦 使用 pnpm 作为包管理器
• 🔧 完整的开发工具链
• 📖 详细的类型定义
• 🎯 开箱即用的组件
• 📚 完整的文档系统

快速开始

安装依赖

pnpm install

开发模式

pnpm dev

构建组件库

pnpm build:lib

文档开发

# 启动文档开发服务器
pnpm docs:dev

# 构建文档
pnpm docs:build

# 预览文档
pnpm docs:preview

类型检查

pnpm type-check

代码格式化

pnpm format

代码检查

pnpm lint

项目结构

gvs-component/
├── packages/                 # 组件库源码
│   ├── components/          # 组件目录
│   │   ├── button/         # 按钮组件
│   │   ├── card/           # 卡片组件
│   │   ├── input/          # 输入框组件
│   │   └── modal/          # 模态框组件
│   ├── types/              # 类型定义
│   └── index.ts            # 主入口文件
├── src/                    # 开发环境源码
│   ├── main.ts            # 开发环境入口
│   ├── App.vue            # 开发环境App组件
│   └── styles/            # 样式文件
├── docs/                   # 文档站点
│   ├── .vitepress/        # VitePress 配置
│   ├── guide/             # 指南文档
│   ├── components/        # 组件文档
│   └── index.md           # 文档首页
├── examples/              # 使用示例
├── dist/                  # 构建输出目录
├── vite.config.ts         # Vite开发配置
├── vite.lib.config.ts     # Vite库构建配置
├── tsconfig.json          # TypeScript配置
├── package.json           # 项目配置
└── README.md              # 项目说明

组件使用

全局注册

import { createApp } from 'vue'
import GvsComponent from 'gvs-component'
import 'gvs-component/dist/style.css'

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

按需引入

import { GvsButton, GvsCard, GvsInput, GvsModal } from 'gvs-component'

组件示例

<template>
  <!-- 按钮组件 -->
  <gvs-button type="primary" @click="handleClick"> 点击我 </gvs-button>

  <!-- 卡片组件 -->
  <gvs-card header="卡片标题">
    <p>卡片内容</p>
  </gvs-card>

  <!-- 输入框组件 -->
  <gvs-input v-model="value" placeholder="请输入内容" />

  <!-- 模态框组件 -->
  <gvs-modal v-model="visible" title="模态框">
    <p>模态框内容</p>
  </gvs-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const visible = ref(false)

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

文档

完整的文档请访问：文档站点

文档特性

• 📖 详细的组件 API 文档
• 💻 可交互的组件演示
• 🔍 全文搜索功能
• 📱 响应式设计
• 🌙 深色模式支持

本地开发文档

# 启动文档开发服务器
pnpm docs:dev

# 访问 http://localhost:5173/docs/

开发指南

添加新组件

1. 在 packages/components/ 下创建新组件目录
2. 创建组件文件 index.vue 和类型文件 types.ts
3. 在 packages/components/index.ts 中导出新组件
4. 在 packages/index.ts 中注册新组件
5. 在 docs/components/ 下添加组件文档

组件开发规范

• 使用 TypeScript 编写类型定义
• 继承 Element Plus 对应组件
• 提供完整的 Props 和 Events 支持
• 添加适当的默认值和验证
• 编写组件文档和示例

样式开发

• 使用 SCSS 编写样式
• 遵循 BEM 命名规范
• 使用 CSS 变量实现主题定制
• 保持样式的可复用性

文档开发

• 使用 Markdown 编写文档
• 在文档中直接使用组件进行演示
• 提供完整的 API 说明
• 添加使用示例和最佳实践

构建和发布

构建

pnpm build:lib

构建产物位于 dist/ 目录：

• index.js - CommonJS 格式
• index.mjs - ES Module 格式
• index.d.ts - TypeScript 类型定义

发布

npm publish

技术栈

• 框架: Vue 3
• 语言: TypeScript
• UI 库: Element Plus
• 构建工具: Vite
• 包管理器: pnpm
• 样式: SCSS
• 文档: VitePress
• 代码规范: ESLint + Prettier

浏览器支持

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

许可证

MIT License