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

Posted 咖啡壶子

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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样式
  1. 注册
// components:  // 手动注册组件名
//   // VanButton: Button
//   // 等价的
//   [Button.name]: Button
// 
  1. 使用
<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

表单验证规则:

以上是关于vue基础6--vant组件库的基本使用的主要内容,如果未能解决你的问题,请参考以下文章

vue的基础使用

vue 基础之基本指令以及使用

vue组件库的正确使用方法是啥?

vue.js基础(继)

小程序的 iview Weapp 组件库的使用

Vue CLI 3开发中试用UIkit 3组件库