# dao-style-extend

本组件库的主要目的是存放一些与业务相关联，同时跨项目使用频繁的组件

- 天然的分包加载

## FIXME

- [ ] 当前文档站 dev 模式第一次打开的时候，可能会出现无法打开的情况，在命令行终端 dev 命令，重启即可

## 使用方式

### 前置条件

1. 我们使用一个插件来支持自动的引入组件对应的 css 文件[该插件地址](https://www.npmjs.com/package/@dao-style/unplugin-extend)
2. 请确保安装了 [`@dao-style/core`](https://www.npmjs.com/package/@dao-style/core)，本项目中的组件可能会依赖该组件库中的某个组件，但我们将其作为 peerDependency，并在打包时外置。

### 在项目中使用

你既可以单个的 SFC 中独立引入组件库中的某个组件

```vue
<template>
  <dao-label-extend />
</template>

<script setup>
import { DaoLabelExtend } from '@dao-style/extend';
</script>
```

或者你可以在全局引入并使用 installer 函数进行统一的注册

```typescript
import { DaoLabelExtend, DaoHoverCard, installer } from '@dao-style/extend';

const components = {
  DaoLabelExtend,
  DaoHoverCard,
  ...
};

app.use(installer(components));
```

## Recommended IDE Setup

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

```sh
npm i # or `npm i` or `yarn`
```

### Compile and Minify for Production

```sh
npm run build
```

#### Type-Check only

```sh
npm run typecheck
```

### Run Unit Tests with vitest

```sh
npm run test # or `npm t`
```