uni-app 使用 vant 布局 +HBuilderX 保姆式教程

992 阅读1分钟

uni-app如何使用vant 布局?

使用HBuilderX创建好uni-app项目后开始一下步骤↓

1.首先打开vant 官方

vant-contrib.gitee.io/vant-weapp/…

2.下载vant根据自己vue版本进行下载

npm i @vant/weapp -S

在根目录与pages同级目录创建wxcomponents文件将下载的node_modules文件中的@vant/dist拿出来放到wxcomponents里面修改重命名为vant

pages.js中:
 "usingComponents": {
      "van-button": "wxcomponents/vant/button/index"
  }

App.vue 配置公共样式:
@import 'wxcomponents/vant/common/index.wxss';
回引号别忘记加+ ; 否则报错

使用时注意事项:

因为编译后用的小程序,而我们写代码用的vue所以要这样写不然会
报错但是编译后一样可以出效果!

image.png

温馨提示!!!运行时 勾选压缩代码 否则会报错!

下面代码图↓

0819b15a22354fb6f4764f17163b2d1.jpg

image.png

image.png

image.png