vant-ui 按需引入

最新推荐文章于 2025-05-31 23:32:52 发布

shiqianhui1124

最新推荐文章于 2025-05-31 23:32:52 发布

阅读量300

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/shiqianhui1124/article/details/117634954

版权

本文介绍了 vant-ui 在 Vue 项目中的按需引入方法，包括安装 vant、babel-plugin-import 插件，并提供了在 .babelrc 和 babel.config.js 中的配置示例，以及在 main.js 文件中引入组件的步骤。

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

vant-ui按需引入是最推荐的一种引入方式，减少项目体积。

首先安装vant

npm i vant -S（vue2.x的下载方式）

npm i vant@next -S （vue3.x的下载方式)

安装babel-plugin-import 插件

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

在.babelrc 中添加配置

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

对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

引入

在项目src目录中创建plugins文件夹，包含一个index.js文件，在index.js文件中，直接引入项目所需要用到的Vant 组件

import Vue from "vue";
// 首先引入我们的vue
import { Button, Cell, CellGroup } from 'vant'
// 按需引入我们使用的组件
Vue.use(Button);
Vue.use(Cell);
Vue.use(CellGroup );
// 使用我们的use方法

在main.js文件中引入这个js文件即可

import "./vant.js"
// 我们j按需引入js文件的路径

其他vant-ui的引入方法请查询官网：https://vant-contrib.gitee.io/vant/#/zh-CN/