首页 > 技术文章 > 【Uniapp】uniapp 中使用 vant-weapp

AAABingBingBing 2020-07-24 10:58 原文

uniapp 中使用 vant-weapp

1. 在根目录下创建 wxcomponents(固定文件名,不可修改),wxcomponents 下建文件夹 vant

在根目录下创建 , 下建文件夹

2. 项目引入

3. 在 App.vue 中引入 UI 样式

在中引入样式

4. 在 pages.json 中引入对应组件

在对应页面中使用组件

或者在全局下使用组件

// pages.json
{
  "pages": [],
  "globalStyle": {
    ...
    "usingComponents": {
      "van-popup": "/wxcomponents/vant/dist/popup/index",
      "van-slider": "/wxcomponents/vant/dist/slider/index",
      "van-index-bar": "/wxcomponents/vant/dist/index-bar/index",
      "van-index-anchor": "/wxcomponents/vant/dist/index-anchor/index",
      "van-uploader": "/wxcomponents/vant/dist/uploader/index",
      "van-checkbox": "/wxcomponents/vant/dist/checkbox/index",
      "van-checkbox-group": "/wxcomponents/vant/dist/checkbox-group/index",
      "van-switch": "/wxcomponents/vant/dist/switch/index",
      "van-dropdown-menu": "/wxcomponents/vant/dist/dropdown-menu/index",
      "van-dropdown-item": "/wxcomponents/vant/dist/dropdown-item/index"
      ...
    }
  }
}

推荐阅读