uniapp使用vant
背景操作1.下载文件https://github.com/andurils/vant-weapp-uniapp解压后如图2.复制文件在uniapp项目根目录创建wxcomponents 目录,并将上图中标红的dist整个复制到改文件夹下,并改为为vant,如图:3.文件引用3.1pages.json 引入组件在 uniapp 项目的 pages.json 文件中的 globalStyle 属性中使
·
背景
操作
1.下载文件
https://github.com/andurils/vant-weapp-uniapp
解压后如图
2.复制文件
在uniapp项目根目录创建wxcomponents 目录,并将上图中标红的dist整个复制到改文件夹下,并改为为vant,如图:
3.文件引用
3.1pages.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"
}
3.2 App.vue引入样式表
@import '/wxcomponents/vant/common/index.wxss';
如图
3.3 vant组件使用
在使用页面就可以进行使用了
<van-button type="default">默认按钮</van-button>
易错
流程上不算复杂,但是确实有些繁琐,不是很友好,其中出现的问题主要是文件夹的命名上,之前我将dist文件夹放在components下,引用就不行,一定要在wxcomponents下,这点对资源管理其实不是很友好,但是也懒得去排查和修改了。易错的问题主要就是在于文件的引用上。
更多推荐
已为社区贡献1条内容
所有评论(0)