vant-ui 的按需引入

前言

以前我们使用vue框架写项目的时候，总是在全局导入，但是到了实际开发中，为了提高性能，缩小项目体积，都会要求我们按需导入

一、安装

通过npm安装

npm i vant -S

通过yarn安装

yarn add vant

二、导入

我们先来说一下以前的导入方式 (全局导入)
这种导入方式直接在 main.js 文件下引入 以下两个文件就可以了

import Vant from ‘vant’；
import ‘vant/lib/index.css’；
还要记得： Vue.use(vant) (安装插件)

接下来说一下我们今天的按需导入
安装插件：babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
命令：

npm i babel-plugin-import -D

然后找到 babel.config.js 文件
将下面这段代码复制进去
 

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

如图：