vue项目中vant-ui按需导入

前言：以前我使用ui组件库的时候，总是全局导入，但是到了实际开发中，为了提升性能，都会需要我们使用按需导入。

1、安装

通过 npm 安装

npm i vant -S

通过 yarn 安装

yarn add vant

2、导入

我们先来说一下以前的导入方式 (全局导入)
这种导入方式直接在 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
    }]
  ]

如图：

然后我们就可以按需导入了

我这里是单独建了个 vant.js 的文件，然后再将这个vant.js文件引入到main.js中，你也可以直接在main.js文件中这样写你要按需导入的组件。

最后，很重要，一定要重启项目

npm run serve
不然就会没有样式效果

就像我的这个按钮一样，没有样式效果，我刚开始也是纳闷了很久，还以为是我哪里引入错了。

重启后：

最近又看到一句很好的话：当你的才华配不上你的野心时，就好好努力吧 ！