@ddc-123/vue3-component-lib

一个基于 Vue 3 的轻量组件库，采用 Vite lib 模式构建，支持 ESM/CJS 双格式与类型文件输出，内置基础样式变量，开箱即用。

安装

npm i @ddc-123/vue3-component-lib
# 或者
pnpm add @ddc-123/vue3-component-lib

• 对等依赖：vue >= 3.3.0

快速开始

• 全量引入（全局注册所有组件）

import { createApp } from 'vue'
import UiLib from '@ddc-123/vue3-component-lib'
import '@ddc-123/vue3-component-lib/style.css'
import App from './App.vue'

createApp(App).use(UiLib).mount('#app')

• 按需使用（本地注册或直接在模板中使用）

import { UiButton } from '@ddc-123/vue3-component-lib'
import '@ddc-123/vue3-component-lib/style.css'

export default {
  components: { UiButton },
}

默认插件会自动全局注册组件，注册逻辑见 src/index.ts:7 的 install(app) 方法，同时全局引入基础样式 src/styles/index.css。

安装后如何导入

• 在项目入口处（如 main.ts）引入库与样式：

import UiLib from '@ddc-123/vue3-component-lib'
import '@ddc-123/vue3-component-lib/style.css'

• 全量使用时通过 app.use(UiLib) 完成全局注册；按需使用时只需按模块导入对应组件。
• 样式文件为构建产物 dist/vue3-component-lib.css，包内导出子路径为 style.css，需要显式引入一次以确保主题变量与基础样式生效。

组件列表

• UiButton 基础按钮，导出位置：src/components/index.ts:1
  • 主要 props：variant: 'primary' | 'secondary' | 'text'、disabled: boolean（定义处：src/components/Button/Button.vue:12-20）
  • 事件：click(MouseEvent)（定义处：src/components/Button/Button.vue:18-20）

示例：

<template>
  <UiButton variant="primary">Primary</UiButton>
  <UiButton variant="secondary">Secondary</UiButton>
  <UiButton variant="text" :disabled="true">Text</UiButton>
</template>

主题与样式

• 全局样式变量定义在 src/styles/index.css:1-4
• 可在项目中覆盖 CSS 变量来自定义主题，例如：

:root {
  --ui-primary: #1f7ae0;
  --ui-text: #222;
}

本地开发（Playground）

仓库内置 playground 站点用于演示与调试组件：

npm run play         # 启动开发服务器
npm run play:build   # 构建演示站点
npm run play:preview # 预览构建产物

• 在 Playground 中通过别名直接引用源码：playground/vite.config.ts:10
• 路由会自动收集 playground/src/*/index.vue 作为演示页面，见 playground/src/router.ts:4-15

构建与类型检查

npm run build      # 产物输出到 dist/
npm run typecheck  # TypeScript 类型检查

• 构建配置位于 vite.config.ts:8-22，输出 es 与 cjs 两种格式，并生成类型文件到 dist/types
• 包入口与导出：
  • main: dist/index.cjs.js
  • module: dist/index.es.js
  • types: dist/types/index.d.ts
  • exports: import/require/default/types 指向上述文件（见 package.json）

目录结构

├─ src
│  ├─ components
│  │  ├─ Button/Button.vue
│  │  └─ index.ts
│  ├─ styles/index.css
│  └─ index.ts
├─ playground
│  ├─ src
│  │  ├─ Button/index.vue
│  │  ├─ App.vue
│  │  ├─ Home.vue
│  │  └─ router.ts
│  └─ vite.config.ts
├─ vite.config.ts
├─ package.json
└─ docs
   ├─ 发布指南.md
   └─ 添加组件.md

发布到 npm（摘要）

1. 登录并确认账户：npm login、npm whoami
2. 构建与类型检查：npm run build、npm run typecheck
3. 版本号递增：npm version patch
4. 发布：npm publish（作用域包如需公开：npm publish --access public）

详细步骤可参考 docs/发布指南.md

许可证

MIT