Vue.js 搭配 Vant UI 框架的快速入门-CSDN博客

本文链接：https://blog.csdn.net/wx0626_/article/details/124483598

本文介绍了如何在Vue项目中使用Vant UI框架。首先通过npm安装 vant 和 babel-plugin-import 插件，然后在babel.config.js中配置插件，最后按需导入并使用Vant的组件。

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

第一步：通过npm安装

1，npm i vant -S

第二步：安装babel插件（推荐的做法）

2，npm i babel-plugin-import -D

第三步：在babel.config.js文件中添加如下设置

plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
第四步：导入我们需要使用的组件

import { NavBar, Card, SubmitBar } from 'vant'
Vue.use(NavBar)
Vue.use(Card)
Vue.use(SubmitBar)

第五步：使用组件在app.vue中

<template>
  <div id="app">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-card
      num="2"
      tag="标签"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      origin-price="10.00"
    />
    <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    />
    <van-submit-bar
      disabled
      :price="3050"
      button-text="提交订单"
      tip="你的收货地址不支持同城送, 我们已为你推荐快递"
      tip-icon="info-o"
      @submit="onSubmit"
    />
  </div>
</template>
<script>
export default {
  methods: {
    onClickLeft () {
      alert('返回')
    },
    onClickRight () {
      alert('按钮')
    },
    onSubmit () {
      alert('提交成功')
    }
  }
}
</script>