vant安装配置（按需引入/全局引入/覆盖样式）

1、安装

npm i vant -S

//自动按需引入组件
npm i babel-plugin-import -D

2、在.babelrc 中添加配置

"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]

3、模块内按需引入组件

<template>
    <div>
        <van-button type="warning">警告按钮</van-button>
    </div>
</template>

<script>
import { Button} from 'vant';
export default{
    name:'HelloWorld',
    components:{
        [Button.name]:Button
    }
}
</script>

4、main.js 全局引用（适用于公共组件）

import Vue from 'vue'
import App from './App'
import { NavBar,Toast } from 'vant'

//vant组件挂载
Vue.use(NavBar);
Vue.use(Toast);

5、覆盖vant样式，采用深度选择器

<style scoped lang="less">

// 方式1
/deep/ .van-tree-select__nav{
    background-color:#F2F2F2;
 }

// 方式2
.a >>> .b {
   color:#f00;
}
</style>