支持,小程序 ,app, 不支持h5 以测试
1. 新建相关目录
- 根目录下创建 wxcomponents
- wxcomponents下新建vant目录
-
创建完成后的目录结构
2. 项目中引入vant-weapp组件
-
npm 一下 可以下载最新的 vant-weapp
npm i vant-weapp -S --production
-
解压下载文件,将dist目录拷贝到刚才创建vant目录中
-
3. 页面中使用引入的UI组件
1.pages.json 引入
2.页面中引入
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"usingComponents": {
"van-button": "/wxcomponents/vant/button/index"
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
<template>
<view class="meun">
<van-button type="primary">主要按钮</van-button>
</view>
</template>;