vant使用导盲

封景_

已于 2022-04-29 17:59:51 修改

阅读量567

点赞数

文章标签： vue.js npm javascript

于 2022-04-29 10:06:51 首次发布

本文链接：https://blog.csdn.net/pymlist/article/details/124489499

版权

本文提供了一种浅入 vant 框架的方法，详细介绍了 vant 在 Vue2 项目的准备工作，包括 vant 的安装、按需引入 vant 组件插件的配置，并在 babel.config.js 或 .babelrc 中导入插件。接着，讲述了如何在 vant 官网查找组件并按需引入，粘贴演示代码到相应页面，以及自定义组件属性、事件和样式。通过这三个步骤的准备和使用教程，帮助开发者快速掌握 vant 的使用。

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

浅入vant

至于vue2的vant使用流程

1准备工作

1.1安装

npm i vant@latest-v2 -S

1.2安装按需引入vant组件的插件

npm i babel-plugin-import -D

该插件会将引入组件语句进行编译

原始引入语句实例

import 组件 from 'vant/lib/组件'

使用插件编译的引入语句

import 组件 from 'vant'

上下对比也更加凸显了使用插件可以大大提升开发效率，所以下面跟我配置插件

1.3配置组件

这个插件是babel所提供的所以要找vue项目下的babel.config.js如果在当前文件下找不到这个配置babel的配置文件，也可能因为babel版本不同叫**.babelrc**也不是没可能

在当前文件下导入插件

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

如果在这之前已经有插件导入过了就不要把上面代码全粘贴过去了

将vant组件全部放到一个单独的文件最后在main.js入口文件内进行引入，这样避免让入口文件显示的很乱

我是在src目录下定义vant目录再在下面定义了一个index.js,在index.js文件下引入需要的组件

因为引入组件需要用到vue对组件进行注册所以在index.js里需要引入vue

到这里准备工作就做完了，需要引入什么组件就去vant官网侧边栏获取

下面无限循环这几个过程就好了

2使用教程

2.1.点击到想用的组件详情介绍，在上面创建vant目录下的index.js进行按需引入

2.2.将演示代码粘贴到以用组件的页面

2.3.需要对组件进行自定义操作时可以看看演示文档的底部有定义属性的props，定义事件的events也有自定义样式

总结：

准备工作三步：安装vant，安装vant引入组件，配置vant引入组件，

使用过程三步：进入vant官网找=需要组件看引入方法，ctrl+c演示案例，ctrl+v演示案例到用到的vue文件中

有特殊需要可以看看如何用vant为组件留的调用api，属性，内置事件，自定义样式

看到这里恭喜你，你已经是一个合格的CV攻城狮了