Vue-vant的使用

Vant 是赞前端团队维护的移动端组件库，提供了一整套 UI 基础组件和业务组件。可以快速搭建电商网站,一下是使用方法:

第一步:通过npm安装

npm i vant -S

第二步:安装babel插件

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)

第五步:使用组件

<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>