vue-cli3.0 使用vant

最新推荐文章于 2025-06-24 16:34:58 发布

转载最新推荐文章于 2025-06-24 16:34:58 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c7cdc53e51d45084c33384b

文章标签：

#javascript #webpack #ViewUI

本文详细介绍了如何在项目中安装并配置Vant UI组件库和Babel-plugin-import插件，通过npm命令和修改babel.config.js文件，实现Vant组件的按需加载，优化项目性能。

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

install 'vant' (dependencies)

    npm install vant -S
复制代码

install 'babel-plugin-import' (devDependencies)

    npm install babel-plugin-import -D
复制代码

config babel.config.js (hello-world/babel.config.js)

    module.exports = {
      presets: ['@vue/app'],
      
      // add begin
      plugins: [
        [
          'import',
          { libraryName: 'vant', libraryDirectory: 'es', style: true },
          'vant'
        ]
      ]
      // add end
    };

复制代码

接下来就可以直接在项目中，正确的使用vant了

转载于:https://juejin.im/post/5c7cdc53e51d45084c33384b