vant-ui 的按需引入_vantui库不能动态引用吗-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57750909/article/details/117526391

本文介绍了在Vue项目中如何实现Vant UI的按需引入，以优化性能和减小项目体积。首先讲解了传统的全局导入方式，然后详细阐述了按需导入的步骤，包括安装babel-plugin-import插件，配置babel.config.js，并展示了在main.js文件中按需导入 vant 组件的方法。最后强调，完成配置后必须重启项目，否则样式可能无法生效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

以前我们使用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
    }]
  ]

如图：

在这里插入图片描述

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

在这里插入图片描述

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

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

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

在这里插入图片描述

就像我的这个按钮一样，没有样式效果

重启后：

在这里插入图片描述