p-component-lib

P Component Library

一个基于Vue 3的现代化组件库。

特性

• 🚀 基于 Vue 3 Composition API
• 📦 支持 TypeScript
• 🎨 可定制的主题系统
• 📱 响应式设计
• 🌙 支持暗黑模式
• 📖 完整的文档和示例

安装

npm install p-component-lib

使用

全局引入

import { createApp } from 'vue'
import PComponentLib from 'p-component-lib'
import 'p-component-lib/dist/style.css'

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

按需引入

import { Button } from 'p-component-lib'
import 'p-component-lib/dist/style.css'

组件

Button 按钮

基础的按钮组件。

基础用法

<template>
  <Button type="primary">Primary Button</Button>
</template>

<script setup>
import { Button } from 'p-component-lib'
</script>

按钮类型

<template>
  <Button type="primary">Primary</Button>
  <Button type="secondary">Secondary</Button>
  <Button type="success">Success</Button>
  <Button type="warning">Warning</Button>
  <Button type="danger">Danger</Button>
</template>

按钮尺寸

<template>
  <Button size="small">Small</Button>
  <Button size="medium">Medium</Button>
  <Button size="large">Large</Button>
</template>

按钮状态

<template>
  <Button disabled>Disabled</Button>
  <Button loading>Loading</Button>
  <Button block>Block Button</Button>
</template>

API

Button Props

属性	类型	默认值	描述
type	primary | secondary | success | warning | danger	primary	按钮类型
size	small | medium | large	medium	按钮尺寸
disabled	boolean	false	是否禁用
loading	boolean	false	是否加载中
block	boolean	false	是否块级元素

Button Events

事件名	描述
click	点击按钮时触发

主题

组件库支持自定义主题，可以通过CSS变量来定制颜色、尺寸等。

:root {
  --p-primary-color: #409eff;
  --p-primary-hover-color: #66b1ff;
  --p-font-size-medium: 14px;
  /* 更多变量... */
}

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build

# 运行测试
npm run test

# 启动文档服务器
npm run dev:docs

# 构建文档
npm run build:docs

📁 NPM 包结构

本项目遵循标准的 npm 包结构，只有必要的文件会被发布到 npm：

p-component-lib/
├── dist/                    # 构建输出目录（发布到npm）
│   ├── p-component-lib.es.js    # ES模块格式
│   ├── p-component-lib.umd.js  # UMD格式
│   ├── style.css               # 样式文件
│   └── types/                  # TypeScript声明文件
│       └── index.d.ts
├── package.json             # 包配置文件
├── README.md                # 项目说明
└── LICENSE                  # 许可证

源代码、文档、测试和配置文件等不会被包含在发布的包中，以减小包体积。

🚀 发布流程

• 更新版本号

  npm version patch  # 补丁版本 x.x.1
  npm version minor  # 次要版本 x.1.x
  npm version major  # 主要版本 1.x.x
  

• 构建并发布

  npm run build
  npm publish
  

浏览器支持

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

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！