@zzzzzzhaopu/vue

Vue 3 组件库，支持 TypeScript 和按需引入。

安装

npm install @zzzzzzhaopu/vue
# 或
pnpm add @zzzzzzhaopu/vue

使用方式

1. 全局引入（不推荐，会打包所有组件）

import { createApp } from 'vue';
import MyUI from '@zzzzzzhaopu/vue';
import '@zzzzzzhaopu/vue/styles';
import App from './App.vue';

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

2. 按需引入（推荐方式一：从主入口）

// main.ts - 全局引入样式（只需一次）
import '@zzzzzzhaopu/vue/styles';

// 组件文件 - 按需引入组件
import { Button, Input } from '@zzzzzzhaopu/vue';

<script setup>
import { Button } from '@zzzzzzhaopu/vue';
</script>

<template>
  <Button variant="primary">Click me</Button>
</template>

3. 按需引入（推荐方式二：独立路径，Tree Shaking 更好）

// main.ts - 全局引入样式（只需一次）
import '@zzzzzzhaopu/vue/styles';

// 组件文件 - 从独立路径引入
import { Button } from '@zzzzzzhaopu/vue/Button';
import { Input } from '@zzzzzzhaopu/vue/Input';

TypeScript 支持

完整的 TypeScript 类型定义：

import type { ButtonProps, InputProps } from '@zzzzzzhaopu/vue';

const buttonProps: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  disabled: false
};

组件列表

• Button - 按钮组件
  • Props: variant, size, disabled
  • Events: click
• Input - 输入框组件
  • Props: modelValue, placeholder, disabled
  • Events: update:modelValue

注意事项

1. 样式必须全局引入一次：import '@zzzzzzhaopu/vue/styles'
2. 组件按需引入：只引入需要的组件，减小打包体积
3. TypeScript 支持：所有组件都有完整的类型定义
4. Tree Shaking：使用独立路径引入（如 @zzzzzzhaopu/vue/Button）可以获得最佳的 Tree Shaking 效果

构建产物说明

dist/
├── index.js              # 主入口（全量导出）
├── index.d.ts            # 主入口类型
├── components/
│   ├── Button/
│   │   ├── index.js      # Button 独立入口
│   │   └── index.d.ts    # Button 类型
│   └── Input/
│       ├── index.js      # Input 独立入口
│       └── index.d.ts    # Input 类型
└── styles/
    ├── index.css         # 样式文件
    └── index.d.css.ts    # 样式类型