uni-app引入UI组件库(Vant-weapp)

uni-app引入UI组件库(Vant-weapp)

1. 新建相关目录

  • 根目录下创建 wxcomponents
  • wxcomponents下新建vant目录
    uni-app引入UI组件库(Vant-weapp)_第1张图片
    2. 项目中引入vant-weapp组件
    • 下载最新的zip包 (https://github.com/youzan/vant-weapp/releases)下载最新版本

    • 解压下载文件,将dist目录拷贝到刚才创建vant目录中
      uni-app引入UI组件库(Vant-weapp)_第2张图片
      uni-app引入UI组件库(Vant-weapp)_第3张图片

3. 页面中使用引入的UI组

1)在App.vue文件中引入UI组件库的 样式文件

@import “/wxcomponents/vant/dist/common/index.wxss”;

uni-app引入UI组件库(Vant-weapp)_第4张图片
2)在pages.json中,注册页面需要的组件

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

uni-app引入UI组件库(Vant-weapp)_第5张图片
3)在index.vue中写入相应的组件
uni-app引入UI组件库(Vant-weapp)_第6张图片
效果如下:
uni-app引入UI组件库(Vant-weapp)_第7张图片

你可能感兴趣的:(uni-app引入UI组件库(Vant-weapp))