<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">
    <img alt="logo" src="https://yun.swimly.cn/source/ldesign/logo.svg" height="60" style="margin-bottom: 10px;">
</p>

<h1 align="center" style="display:flex;flex-direction:row;justify-content:center;">桌面端组件库（vue3）</h1>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;margin-bottom: 24px;">基于`vue3`的桌面端组件库</p>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;gap:16px;margin: 16px 0;">
  <img src="https://img.shields.io/npm/v/@ldesign/desktop-next?style=flat-square" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@ldesign/desktop-next.svg?style=flat-square&color=#4fc08d" alt="downloads" />
  <img src="https://img.badgesize.io/https:/unpkg.com/@ldesign/desktop-next/dist/ldesign.min.js?label=gzip%20size&compression=gzip&color=&style=flat-square#4fc08d" alt="Gzip Size" />
</p>

---

<p align="center" dir="ltr">
  🔥 <a href="https://yun.swimly.cn/ldesign/desktop-next">文档网站</a>
  &nbsp;
  🌈 <a href="https://git.longrise.cn:6285/ldesign/ldesign-desktop-next">代码仓库</a>
</p>

---

@ldesign/desktop 是基于`vue@3`开发用于 `桌面端` 的组件库。

#### 特性

- 用于桌面端系统及网站，统一的接口风格，一致的UI表现

- 基于 vue3

- 支持暗黑模式及主题定制，基于`less`变量和`css`变量，更换主题方式灵活

- 支持按需加载，通过`es`和`esm`模块引入，能最小限度减小项目大小

#### 安装

```bash
npm i @ldesign/desktop-next
```

#### 基本用法

推荐使用 `Webpack` 或 `Rollup` 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入：

```
import Vue from 'vue'
import LDesign from '@ldesign/desktop-next';
import '@ldesign/desktop/es/style/index.css';

Vue.use(LDesign)
```
