按需引入vant组件库

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 }

}