1. 安装
# 通过 npm 安装
npm i @vant/weapp -S --production
# 通过 yarn 安装
yarn add @vant/weapp --production
# 安装 0.x 版本
npm i vant-weapp -S --production
2. 引入项目
- 首先在项目根目录创建文件夹
wxcomponents
,然后在其中创建vant
文件夹。 - 把node_modules中的vant中的dist文件夹复制到刚创建的
wxcomponents\vant
中。
- 打开App.vue,引入vant的样式文件:
<style lang="scss">
@import '/wxcomponents/vant/common/index.wxss';
</style>
- 打开
pages.json
文件,在globalStyle中引入需要的组件:
"usingComponents": {
"van-button": "wxcomponents/vant/button/index",
"van-tab": "wxcomponents/vant/tab/index",
"van-tabs": "wxcomponents/vant/tabs/index"
}
- 使用:
<van-button type="default">默认按钮</van-button>
组件用法见文档。如果使用的vue,要改成vue的写法。
如:
<van-tabs active="{{ active }}" bind:change="onChange">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
改成
<van-tabs :active="active" @change="onChange">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>