My Components

一个基于 Vue 3 的组件库，包含常用组件和工具函数。

项目结构

my-components/
├── packages/
│   ├── components/          # Vue 组件
│   │   ├── src/
│   │   │   ├── components/
│   │   │   │   └── Button.vue
│   │   │   └── index.ts
│   ├── utils/               # 工具函数
│   │   ├── src/
│   │   │   ├── composables/
│   │   │   │   └── useCounter.ts
│   │   │   └── index.ts
├── package.json             # 项目配置
├── pnpm-workspace.yaml      # pnpm 工作区配置
└── turbo.json               # Turbo 配置

安装

pnpm install

开发

pnpm run dev

构建

pnpm run build

测试

pnpm run test

组件

Button 组件

基本用法

<template>
  <Button>普通按钮</Button>
  <Button primary>主要按钮</Button>
</template>

<script setup>
import { Button } from '@codelm/my-components';
</script>

属性

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | primary | boolean | false | 是否为主要按钮 |

事件

| 事件 | 描述 | |------|------| | click | 点击事件 |

工具函数

useCounter

基本用法

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script setup>
import { useCounter } from 'utils';

const { count, increment, decrement, reset } = useCounter(0);
</script>

参数

| 参数 | 类型 | 默认值 | 描述 | |------|------|--------|------| | initialValue | number | 0 | 初始值 |

返回值

| 返回值 | 类型 | 描述 | |--------|------|------| | count | Ref | 当前计数 | | increment | () => void | 增加计数 | | decrement | () => void | 减少计数 | | reset | () => void | 重置计数 |