Vant Weapp官:https://vant-contrib.gitee.io/vant-weapp/#/home

步骤一:下载vant组件插件

从github上下载该插件https://github.com/youzan/vant-weapp
在这里插入图片描述
只要这个dist文件夹,把dist重命名为vant;

步骤二:

与pages文件夹同级(在项目根目录),创建一个空的文件夹,名为 wxcomponents 必须是这个名字
在这里插入图片描述

将vant(由dist文件夹重命名为vant的文件)文件夹放到wxcomponents里面在这里插入图片描述

步骤三:

在pages.json中,按需引入vant组件在这里插入图片描述

"usingComponents": {
	"van-button": "/wxcomponents/vant/button/index"
}

步骤四:

在app.vue中全局引入样式

<style lang='scss'>
	@import "/wxcomponents/vant/common/index.wxss"
</style>

步骤五:

使用组件在这里插入图片描述在这里插入图片描述

Uniapp使用vant Weapp图标组件报错问题

1、异常信息【index.wxss里的 url(前面加空格全局替换(引入的字体图标路径有问题】

11:43:21.725 Module build failed (from ./node_modules/postcss-loader/src/index.js):
11:43:21.725 SyntaxError
11:43:21.735 (36:10521) Unclosed bracket
11:43:21.736   34 | 
11:43:21.741   35 | 
11:43:21.742 > 36 | @import '../common/index.css';.van-icon{text-rendering:auto;-webkit-font-smoothing:antialiased;font:normal normal normal 14px/1

修改/wxcomponents/vant/icon/index.wxss
如下图在format(“woff2”)后面的url前面加个空格,需要修改两处(或者对这个css文件进行格式化)
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐