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>