开发文档
Vant Weapp - 轻量、可靠的小程序 UI 组件库
在 uniapp 项目的根目录下,创建一个新的 wxcomponents
目录
$ git clone git@gitee.com:vant-contrib/vant-weapp.git
下载下来后,把 vant-weapp 项目下的 dist
目录整个拷贝到上面新建的目录 wxcomponets
中,并把 dist
目录改名为 vant
在 uniapp 项目的 pages.json 文件中的 globalStyle
属性中使用 usingComponents
引入 vant 组件
"globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "usingComponents": { "van-button": "/wxcomponents/vant/button/index", "van-cell": "/wxcomponents/vant/cell/index", "van-cell-group": "/wxcomponents/vant/cell-group/index", "van-icon": "/wxcomponents/vant/icon/index", "van-image": "/wxcomponents/vant/image/index", "van-row": "/wxcomponents/vant/row/index", "van-col": "/wxcomponents/vant/col/index", "van-popup": "/wxcomponents/vant/popup/index", "van-toast": "/wxcomponents/vant/toast/index" }
在页面中使用组件
<view> <van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> </view>
在 App.vue
文件中的 style 处增加 vant 样式
<style> /*每个页面公共css */ @import '/wxcomponents/vant/common/index.wxss'; </style>
导入后,就可以在页面中使用 vant 的样式了
<view class="van-ellipsis"> 这是一段宽度限制 250px 的文字,后面的内容会省略。 </view>