- 在根目录下创建一个文件夹 格式如下wxcomponents/vant
- 前往https://github.com/youzan/vant-weapp下载压缩文件,将该项目的dist文件夹放入wxcomponents/vant
- App.vue的style中引入样式
@import "/wxcomponents/vant/dist/common/index.wxss";
- 在pages.json中引入相应的组件
//全局方式
"globalStyle": {
"usingComponents": {
"van-button": "/wxcomponents/vant/dist/button/index",
"van-calendar": "/wxcomponents/vant/dist/calendar/index"
}
}
//页面方式
"pages": [
{
"path": "pages/address/create",
"style": {
"usingComponents": {
"van-button": "/wxcomponents/vant/dist/button/index",
"van-calendar": "/wxcomponents/vant/dist/calendar/index"
}
}
}
]
example.vue
<template>
<view>
<van-button type="primary" @click="onDisplay">默认按钮</van-button>
<van-calendar :show="show" @close="onClose" @confirm="onConfirm" />
</view>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
onDisplay() {
this.show = true;
},
onClose() {
this.show = false;
},
onConfirm() {
console.log('onConfirm');
}
},
}
</script>