@ivui/vui2

Vui

一个成长中的Vue.js移动端 UI 组件库

🔥 文档网站

---

快速上手

安装

方式一：通过 npm 安装

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

# 通过 yarn
yarn add @ivui/vui2

# 通过 pnpm
pnpm add @ivui/vui2

方式二：通过 CDN 安装

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

<!-- 引入 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>

如果你是通过 方式一 安装的，你应该继续阅读一下内容。

引入组件

方式一：完整引入

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

在 main.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 组件）

// 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)
})

局部注册

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

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