import{_ as s,c as i,o as a,aj as n}from"./chunks/framework.DNhrqZu5.js";const c=JSON.parse('{"title":"VantUI 组件按需加载","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vant.md","filePath":"guide/vue2/vant.md","lastUpdated":1756280955000}'),t={name:"guide/vue2/vant.md"},l=n(`

VantUI 组件按需加载

项目采用Vant 自动按需引入组件 (推荐)下面安装插件介绍：

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

安装插件

bash

npm i babel-plugin-import -D

在babel.config.js 设置

javascript

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
const plugins = [
  [
    "import",
    {
      libraryName: "vant",
      libraryDirectory: "es",
      style: true,
    },
    "vant",
  ],
];
module.exports = {
  presets: [
    ["@vue/cli-plugin-babel/preset", { useBuiltIns: "usage", corejs: 3 }],
  ],
  plugins,
};

使用组件

项目在 src/plugins/vant.js 下统一管理组件，用哪个引入哪个，无需在页面里重复引用

javascript

// 按需全局引入 vant组件
import Vue from "vue";
import { Button, List, Cell, Tabbar, TabbarItem } from "vant";
Vue.use(Button);
Vue.use(Cell);
Vue.use(List);
Vue.use(Tabbar).use(TabbarItem);

`,10),p=[l];function h(e,k,E,r,d,g){return a(),i("div",null,p)}const u=s(t,[["render",h]]);export{c as __pageData,u as default};

VantUI 组件按需加载 ​

安装插件 ​

使用组件 ​

VantUI 组件按需加载

安装插件

使用组件