@zhengjiajun/z-components

ZBlog 组件库 - 基于 @zhengjiajun/z-themes 的 Vue 3 组件集合。

特性

• 🎨 基于 z-themes: 使用统一的主题系统
• 🚀 Vue 3: 完全支持 Vue 3 Composition API
• 📦 Tree-shaking: 支持按需导入
• 🎯 TypeScript: 完整的类型支持
• 🌓 主题切换: 支持明暗主题
• 📱 响应式: 移动端友好

安装

npm install @zhengjiajun/z-components @zhengjiajun/z-themes

快速开始

完整导入

import { createApp } from 'vue'
import ZComponents from '@zhengjiajun/z-components'
import '@zhengjiajun/z-components/style'
import '@zhengjiajun/z-themes'

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

按需导入

import { Card, Avatar } from '@zhengjiajun/z-components'
import '@zhengjiajun/z-components/style'
import '@zhengjiajun/z-themes'

组件

Card 卡片

用于展示相关内容，支持多种布局和交互效果。

<template>
  <Card title="卡片标题" shadow="hover" clickable>
    <p>这是卡片内容</p>
    <template #footer>
      <button>操作按钮</button>
    </template>
  </Card>
</template>

Avatar 头像

用于展示用户头像，支持图片、图标、文字等多种形式。

<template>
  <Avatar 
    src="/avatar.jpg" 
    alt="用户头像"
    size="lg"
    status="online"
    badge="3"
  />
</template>

单独安装组件

如果你只需要某个特定组件，可以单独安装：

# 只安装 Card 组件
npm install @zhengjiajun/card @zhengjiajun/z-themes

# 只安装 Avatar 组件
npm install @zhengjiajun/avatar @zhengjiajun/z-themes

// 使用单独组件
import { Card } from '@zhengjiajun/card'
import '@zhengjiajun/card/style'
import '@zhengjiajun/z-themes'

主题

组件库基于 @zhengjiajun/z-themes，支持主题切换：

// 设置主题
document.documentElement.setAttribute('data-theme', 'dark')

开发

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 类型检查
pnpm type-check

许可证

MIT License