uniapp中使用vant 组件库

步骤1:先去Github上下载  vant-webapp

Vant UI · GitHub

uniapp中使用vant 组件库_第1张图片

 uniapp中使用vant 组件库_第2张图片

 步骤二:解压完成后  在项目根目录创建 wxcomponents/vant目录   并且将解压好的dist目录放到vant目录下

uniapp中使用vant 组件库_第3张图片

 uniapp中使用vant 组件库_第4张图片

 步骤三:在项目中pages.json文件中放入easycom配置

//easycom配置
        "easycom": {
          "autoscan": true, 
          "custom": {
              "van-(.*)": "@/wxcomponents/want/dist/$1/index.vue" 
          }
        }

uniapp中使用vant 组件库_第5张图片

 步骤4:在页面中使用

uniapp中使用vant 组件库_第6张图片

 

 注意:出现新问题  没有样式 或者出现报错 

uniapp中使用vant 组件库_第7张图片

 

uniapp中使用vant 组件库_第8张图片

 解决: 

1、先通过vscode打开这个项目

2、找到 wxcomponents/vant/dist/icon目录

3、扎到该目录下 index.vue 和 index.wxss 文件

4、进去文件 进行格式化即可

uniapp中使用vant 组件库_第9张图片

 

备注 :

如遇到样式不出来 先关闭HB再打开,

或者先注释easycom ,先在全局引入,一定要主要标点符号

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

uniapp中使用vant 组件库_第10张图片

 

你可能感兴趣的:(uni-app,前端,vue.js)