Vant组件库的三种引用方式

• 官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN

一、全局引入所有组件

main.js中配置以下代码

import Vant from 'vant'
import 'vant/lib/index.css'  //引入vant所有组件样式
Vue.use(Vant)  //全局注册

页面使用

 	<van-button type="primary" @click="btn">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>

二、手动按需引入组件

代码如下

import { Button } from 'vant';//button组件
import 'vant/lib/button/style' //button样式
//注册
 components: {
    //注册button组件
    VanButton: Button
    // 等价于
    // [Button.name]: Button,
  }

页面使用

 	<van-button type="primary" @click="btn">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>

三、全局自动按需引入组件

• 1.全局下载babel-plugin-import (Vant 4.0 版本开始，将不再支持)

yarn add babel-plugin-import 

• 2.babel-plugin-import配置相关配置,然后重启服务器

//babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

• 3.main.js中全局按需引入某个组件 Vue.use全局注册

import { Button, Form, Field, CellGroup } from 'vant';//button组件
Vue.use(Button)   //真正注册的组件名叫VanButton
Vue.use(Form)
Vue.use(Field)
Vue.use(CellGroup)