vant按需引入

为什么要按需引入？

在项目进行打包过程中，如果全局引入，文件过于大，优化不方便，所以对vant进行按需引入

步骤

1，点开vant官网>快速上手>下载vant

npm i vant -S

2，按需引入下载一个插件

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

npm i babel-plugin-import -D

3，在项目下创建一个.babel    添加配置

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

4，接着可以在文件中引入所需要的vant组件

// 插件会自动将代码转化为方式二中的按需引入形式

import { Button } from 'vant';

5,或者在src中创建一个文件写入一个文件夹放一个文件

//文件下放入你所需用到的组件即可，这里我是用了 Button 
import Vue from 'vue';
import Vant from 'vant';
import { Button } from 'vant';

Vue.use( Button );

5.2之后在main.js中引入vant.js

import '/plugins/vant.js'

总结：这样就可以使用vant组件