vue_vant的使用

最新推荐文章于 2024-07-31 08:19:45 发布

wx0626_

最新推荐文章于 2024-07-31 08:19:45 发布

阅读量1.1k

点赞数

文章标签： vue.js npm 前端

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

版权

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

摘要由CSDN通过智能技术生成

第一步：通过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&#