Uniapp 导入 Vant 组件库
作者:互联网
Uniapp 导入 Vant 组件库
Vant Weapp
开发文档
创建 wxcomponents 目录
在 uniapp 项目的根目录下,创建一个新的 wxcomponents
目录
下载 vant-weapp 项目
$ git clone git@gitee.com:vant-contrib/vant-weapp.git
下载下来后,把 vant-weapp 项目下的 dist
目录整个拷贝到上面新建的目录 wxcomponets
中,并把 dist
目录改名为 vant
pages.json 引入组件
在 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"
}
使用 vant 组件
在页面中使用组件
<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>
引入 vant 样式
在 App.vue
文件中的 style 处增加 vant 样式
<style>
/*每个页面公共css */
@import '/wxcomponents/vant/common/index.wxss';
</style>
导入后,就可以在页面中使用 vant 的样式了
<view class="van-ellipsis">
这是一段宽度限制 250px 的文字,后面的内容会省略。
</view>
标签:Uniapp,van,Vant,index,cell,导入,组件,wxcomponents,vant 来源: https://blog.csdn.net/qq_23412263/article/details/117394793