open-index/open-npm huggingface dataset:
npm package: @ivui/vui2
Description: 一个不断成长中的Vue.js移动端 UI 组件库
Author: xianzhoukai
Latest version: 1.4.1

<!--
 * @Descripttion:
 * @version:
 * @Author: zhoukai
 * @Date: 2022-09-23 00:05:22
 * @LastEditors: zhoukai
 * @LastEditTime: 2022-10-14 17:16:42
-->

<p align="center">
    <img alt="logo" src="https://fastly.jsdelivr.net/npm/@ivui/vui2/lib/assets/img/logo.png" width="120" style="margin-bottom: 10px;">
</p>

<h1 align="center">Vui</h1>

<p align="center">一个成长中的<a href="https://cn.vuejs.org/">Vue.js</a>移动端 UI 组件库</p>

<p align="center">
  🔥 <a href="http://vui.org.cn/v2/">文档网站</a>
</p>

---

# 快速上手

### 安装

#### 方式一：通过 npm 安装

```bash
# 通过 npm
npm install --save @ivui/vui2

# 通过 yarn
yarn add @ivui/vui2

# 通过 pnpm
pnpm add @ivui/vui2
```

#### 方式二：通过 CDN 安装

如果你是在 html 文件中引入 CDN 链接，之后你可以直接使用 vui 的所有组件。

```bash
<!-- 引入 Vue 和 Vui 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/@ivui/vui2/lib/vui2.min.js"></script>

<div id="app"></div>
<script>
    new Vue({
        el: '#app',
        template: `<vui-captcha type="number"></vui-captcha>`,
    });
</script>
```

<div>
    <br/>
    如果你是通过 <b>方式一</b> 安装的，你应该继续阅读一下内容。
</div>

### 引入组件

#### 方式一：完整引入

<u>Vui 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。</u>

在 main.js 中写入以下内容：

```js
import Vue from "vue"
import Vui from "@ivui/vui2"
import App from "./App.vue"

Vue.use(Vui)

new Vue({
    el: "#app",
    render: (h) => h(App)
})
```

#### 方式二：手动按需引入组件

如果你只希望引入部分组件，比如 Captcha，那么你可以这样写：

**全局注册（你可以在 app 下的任意子组件中使用注册的 Vui 组件）**

```js
// main.js
import Vue from "vue"
import { Captcha } from "@ivui/vui2"
import App from "./App.vue"

Vue.component(Captcha.name, Captcha)
/* 或写为
 * Vue.use(Captcha)
 */

new Vue({
    el: "#app",
    render: (h) => h(App)
})
```

**局部注册**

```html
<!--
  xxx.vue
-->
<template>
    <vui-captcha type="number"></vui-captcha>
</template>
<script>
    import { Captcha } from "@ivui/vui2"
    export default {
        components: {
            [Captcha.name]: Captcha
        }
    }
</script>
```

Vui 支持多种组件注册方式，请根据实际业务需要进行选择。