vue基础6--vant组件库的基本使用

1. vant组件库

1.0 vant组件库-介绍

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

vant官网

特点:

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

1.1 全部引入

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

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

// 方式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 是一款 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

表单验证规则: