dify-components/apps/docs/en/guide/index.md

This is a modern component library template based on Turborepo+Vue 3.5+TypeScript.

# Quick Start

## Introduction

mylib-template is a component library and toolkit template project based on Vue3, consisting of the following parts:

- UI Component Library: Provides commonly used UI components
- Utility Functions: Offers common utility functions
- Hooks: Provides reusable composable functions
- Directives: Offers commonly used directives

## Installation

Install using a package manager:

::: code-group

```bash [npm]
npm install @difylib/ui @difylib/utils @difylib/hooks @difylib/directives
```

```bash [yarn]
yarn add @difylib/ui @difylib/utils @difylib/hooks @difylib/directives
```

```bash [pnpm]
pnpm add @difylib/ui @difylib/utils @difylib/hooks @difylib/directives
```

```bash [bun]
bun add @difylib/ui @difylib/utils @difylib/hooks @difylib/directives
```

:::

## Usage

### UI Components

```ts
// Global import
import { createApp } from 'vue';
import UI from '@difylib/ui';
import '@difylib/ui/style.css';
const app = createApp(App);
app.use(UI);
// Additionally, add the following configuration to tsconfig.json for type hints:
// "types": ["@difylib/ui/global.d.ts"]

// Import on demand
import { Button } from '@difylib/ui';
import '@difylib/ui/style.css';
const app = createApp(App);
app.use(Button);
```

### Utility Functions

```ts
import { isString } from '@difylib/utils';
console.log(isString('hello')); // true
```

### Hooks

```ts
import { useCounter } from '@difylib/hooks';
const { count, increment, decrement } = useCounter();
```

### Directives

```ts
import { vFocus } from '@difylib/directives';
// Global import
app.directive('focus', vFocus);

// Import on demand
import { vFocus } from '@difylib/directives';
app.directive('focus', vFocus);
```