vant组件库

1.全部引入

import Vue from 'vue'

import Vant from 'vant'

import 'vant/lib/index.css'

Vue.use(Vant)

2 手动按需引入

import Button from 'vant/lib/button'; // button组件 

import 'vant/lib/button/style'; // button样式

export default {
    components: { // 手动注册组件名
        VanButton: Button  //注册的名字是大驼峰，使用的时候是写短横线
       // 等价的
       //[Button.name]: Button
     }
}

3 自动按需引入

目标: 按需加载组件

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): import { Button } from 'vant';
   (4): Vue.use(Button) // Button组件全局注册