vant-ui组件库是有赞团队开发维护的ui组件库，是现阶段常用的组件库之一，涵盖前端页面需要的大多数常用组件，相对好用，虽然我也只是用过element-ui和vant-ui而已
我学习vue移动端app项目时就是使用vant-ui,全局引入太占内存，没有必要，因此我们按需引入vant-ui组件库的组件即可
第一步，下载:
npm i vant -S 用npm包管理器下载vant-ui
yarn add vant 用yarn
第二步，安装插件:
npm i babel-plugin-import -D
安转babel-plugin-import插件，一种babel插件，它会在编译过程中将import的写法自动转换为按需引入的方式
第三步，配置:
.babelrc中添加代码
找到"plugins": ["transform-vue-jsx", "transform-runtime"]，添加内容后取下
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
使用方法
方法一:在main.js中直接引入组件
import { Button，Field，Toast } from 'vant'
Vue.use(Button)
.use(Field)
.use(Toast)
方法二:在src目录utils文件下创建js文件，按需引入组件
import Vue from 'vue'
// 在这里引入你所需的组件
import {
Button, //按钮
Toast, //轻提示
Swipe, //轮播图
Field, //输入框
} from 'vant'
// 按需引入UI组件
Vue.use(Button)
Vue.use(Toast)
Vue.use(Field)
方法三:在页面组件中直接引入组件
import { Button } from "vant"
export default {
components:{ [Button.name]: Button }
}
