open-index/open-npm huggingface dataset:
npm package: @ldesign/miniprogram
Description: LDesign微信小程序组件库
Author: ldesign
Latest version: 0.0.5

<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 Miniprogram</h1>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">微信小程序组件库</p>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">
  <img src="https://img.shields.io/npm/v/@ldesign/miniprogram?style=flat-square" alt="npm version" />
  <img src="https://img.shields.io/npm/dm/@ldesign/miniprogram.svg?style=flat-square&color=#4fc08d" alt="downloads" />
  <img src="https://img.badgesize.io/https:/unpkg.com/@ldesign/miniprogram/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/miniprogram">文档网站（国内）</a>
  &nbsp;
  🌈 <a href="https://git.longrise.cn:6285/ldesign/ldesign-miniprogram">代码仓库</a>
</p>

---


## 预览

小程序组件示例小程序，请使用微信扫码预览 ↓
<br/>

<img src="https://swimly.cn/source/weapp-qrcode.jpg"/>

## 安装

### 使用 NPM

小程序已经支持使用 NPM 安装第三方包。

具体使用方式，可以参考小程序官网文档： [《NPM 支持》](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)

```bash
npm i @ldesign/miniprogram -S --production
```

> 建议使用 NPM，不再推荐“源码拷贝的方式”

## 使用组件

以按钮组件为例，只需要在 `JSON` 文件中引入按钮对应的自定义组件即可

```json
{
  "usingComponents": {
    "l-button": "@ldesign/miniprogram/button/button"
  }
}
```

## 在开发者工具中预览

```bash
# 安装项目依赖
npm install

# 执行组件编译
npm run dev
```

打开[微信开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，把 `_example` 目录添加进去就可以预览示例了。

## 基础库版本

最低基础库版本`^2.6.5`
npm package: @ldesign/mobile-next
Description: 基于vue3的移动端组件库
Author: LDesign Group
Latest version: 0.1.10

<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 Mobile Next</h1>

<p align="center" dir="ltr" style="display:flex;flex-direction:row;justify-content:center;">基于<b>vue3</b>的移动端组件库</p>

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

---

@ldesign/mobile-next 是基于`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/mobile-next

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

npm i @vue/composition-api
```

#### 基本用法

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

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

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

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