【Uniapp】uniapp 中使用 vant-weapp

uniapp 中使用 vant-weapp

1. 在根目錄下創建 wxcomponents(固定文件名，不可修改)，wxcomponents 下建文件夾 vant

2. 項目引入

• 在[https://github.com/youzan/vant-weapp]或者Vant Weapp下載最新的 zip 壓縮包

• 解壓，將里面的 dist 文件放到 vant 里面

  

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"
      ...
    }
  }
}