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

<h1 align="center" style="display:flex;flex-direction:row;justify-content:center;">LDesign Desktop</h1>

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

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">
  <img src="https://img.shields.io/npm/v/@ldesign/desktop?style=flat-square" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@ldesign/desktop.svg?style=flat-square&color=#4fc08d" alt="downloads" />
  <img src="https://img.badgesize.io/https:/unpkg.com/@ldesign/desktop/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://swimly.cn/desktop">文档网站（国内）</a>
  &nbsp;
  🌈 <a href="https://git.longrise.cn:6285/lonriseFE/ldesign/-/tree/master/packages/desktop">代码仓库</a>
</p>

---

@ldesign/desktop 是基于`vue@2.6.14`开发用于 `桌面端` 的组件库，切记保证本地的 vue 版本号不要高于 2.6.x，如果使用报错，请检查本地项目的 package.json，确保`vue`以及`vue-template-compiler`的版本号为：`2.6.x`。

```
{ javascript
  "dependencies": {
    ...,
    "vue": "~2.6.14",
  },
  "devDependencies": {
    ...,
    "vue-template-compiler": "~2.6.14"
  }
}
```

#### 特性

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

- 基于 vue(2.6.14)，`@vue/composition-api`开发，既能使用2.0的语法，也能尝鲜3.0的语法

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

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

#### 安装

```bash
npm i @ldesign/desktop

// 最好还要安装@vue/composition-api

npm i @vue/composition-api
```

#### 基本用法

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

```
import Vue from 'vue'
import LDesign from '@ldesign/desktop';
import compositionAPI from '@vue/composition-api';
// 这里面主要是主题以及reset样式，组件自身的样式已经跟随组件一同加载，如果需要自定义主题，也可通过改变该文件来实现
import '@ldesign/desktop/es/style/index.css';

Vue.use(LDesign)
Vue.use(compositionAPI)
```

> 注意：如果没有安装`@vue/composition-api`，项目可能会报错。
