# dm-vue3-ui

_该组件库采用 `Vue3@3.3.4 `+ `TypeScript@4.7.4` + `Vite4.4.7` + `Less@4.1.3` 实现！_<br/> _所有组件样式 `CSS` 均使用 `box-sizing: border-box;` 模式！_<br/> _目前共有 `2` 个常用基础 `UI` 组件，以及 `0` 个常用工具函数，并且持续探索更新中...！_<br/> _开箱即用！_

## document

[dm-vue3-ui](https://gitlab.pscsoft.cn/amazing-f2e/dm-core-ui)

## Install & Use

```bash
pnpm i dm-vue3-ui
# or
npm install dm-vue3-ui
# or
yarn add dm-vue3-ui
```

Import and register component

**Global**

```ts
import { createApp } from 'vue';
import App from './App.vue';

import dmui from 'dm-vue3-ui';
import 'dm-vue3-ui/css';

const app = createApp(App);
app.use(dmui);
```

**Local**

```vue
<script setup lang="ts">
import { DatePicker, CronPicker } from 'dm-vue3-ui';
import 'dm-vue3-ui/css';
</script>
```

## Project

- Get the project code

````

- Install dependencies

```sh
cd dm-vue3-ui

pnpm i
````

- Run project

```sh
pnpm dev
```

## 构建和发布

build、更新版本号、发布到npm

```sh
pnpm run pub
```

## Components

| Component name | Descriptions |
| :------------- | :----------- |
| Button         | 按钮组件     |
| DatePicker     | 日期组件     |
| CronPicker     | cron 表达式  |
| CronTab        | 高级cron组件 |
| PreviewCode    | 代码高亮组件 |
| Catalogue      | 目录组件     |
| Modal          | 弹窗组件     |
| Drawer         | 抽屉组件     |

## Directives

| Directive name | Descriptions    |
| :------------- | :-------------- |
| v-loading      | loading加载指令 |

## Functions

暂无

## 如何开发一个新组件

[组件开发手册](https://di-matrix.feishu.cn/wiki/Fu3mwKkQUikxPGkeKivcYEGinFe)