21-vant组件库

1. vant组件库

1.0 vant组件库-介绍

目标: vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用

vant官网 (opens new window)

特点:

• 提供 60 多个高质量组件，覆盖移动端各类场景
• 性能极佳，组件平均体积不到 1kb
• 完善的中英文文档和示例
• 支持 Vue 2 & Vue 3
• 支持按需引入和主题定制

1.1 全部引入

目标: 看官网文档, 下载, 引入vant组件库

全部引入, 快速开始:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

1. 全部引入, 快速开始: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart (opens new window)

2. 下载Vant组件库到当前项目中

3. 在main.js中全局导入所有组件,

4. 使用按钮组件 – 作为示范的例子

1. 下载vant组件库到当前项目中

   yarn add vant -D

2. 导入所有组件, 在main.js中

   import Vue from 'vue';
   import Vant from 'vant';
   import 'vant/lib/index.css';

   Vue.use(Vant);

3. 使用按钮组件

   https://vant-contrib.gitee.io/vant/#/zh-CN/button

   <van-button type="primary">主要按钮</van-button>
   <van-button type="info">信息按钮</van-button>
   <van-button type="default">默认按钮</van-button>
   <van-button type="warning">警告按钮</van-button>
   <van-button type="danger">危险按钮</van-button>

1.2 手动按需引入

目标: 只引入使用的组件

1. 手动单独引入, 快速开始: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart (opens new window)

// 方式2: 手动 按需引入
// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式

2. 注册

// components: { // 手动注册组件名
//   // VanButton: Button
//   // 等价的
//   [Button.name]: Button
// }

3. 使用

<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

1.3 自动按需引入

目标: 按需加载组件

babel-plugin-import (opens new window) 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

1. 安装插件

   yarn add babel-plugin-import -D

2. 在babel配置文件里 (babel.config.js)

   module.exports = {
       plugins: [
           ['import', {
               libraryName: 'vant',
               libraryDirectory: 'es',
               style: true
           }, 'vant']
       ]
   };

3. 全局注册 - 会自动按需引入

   // 方式1: 全局 - 自动按需引入vant组件
   // (1): 下载 babel-plugin-import
   // (2): babel.config.js - 添加官网说的配置 (一定要重启服务器)
   // (3): main.js 按需引入某个组件, Vue.use全局注册 - 某个.vue文件中直接使用vant组件
   import {
       Button
   } from 'vant';
   Vue.use(Button) // Button组件全局注册, 真正注册的组件名VanButton

1.4 弹出框使用

目标: 使用弹出框组件

https://vant-contrib.gitee.io/vant/#/zh-CN/dialog

<template>
  <div>
    <van-button type="primary" @click="btn">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

<script>
// 方式2: 手动 按需引入
// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式

// 目标: 使用弹出框
// 1. 找到vant文档
// 2. 引入
// 3. 在恰当时机, 调用此函数 (还可以用组件的用法)
import { Dialog } from "vant";
export default {
  // components: { // 手动注册组件名
  //   // VanButton: Button
  //   // 等价的
  //   [Button.name]: Button
  // }
  methods: {
    btn() {
      Dialog({ message: "提示", showCancelButton: true }); // 调用执行时, 页面就会出弹出框
    },
  },
};
</script>

1.5 表单使用

目标: 使用vant组件里的表单组件

https://vant-contrib.gitee.io/vant/#/zh-CN/form

表单验证规则: