小程序引入Vant Weapp

最新推荐文章于 2024-10-20 22:04:57 发布

点点关注不迷路

最新推荐文章于 2024-10-20 22:04:57 发布

阅读量350

点赞数

文章标签：小程序 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_51526447/article/details/128905926

版权

npm i @vant/weapp -S --production

步骤二修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

app.json

  "usingComponents": {
    "van-button": "miniprogram/miniprogram_npm/@vant/weapp/button/index",
    "van-image":"miniprogram/miniprogram_npm/@vant/weapp/image/index",
    "van-grid":"miniprogram/miniprogram_npm/@vant/weapp/grid/index",
    "van-grid-item":"miniprogram/miniprogram_npm/@vant/weapp/grid-item/index",
    "van-cell": "miniprogram/miniprogram_npm/@vant/weapp/cell/index",
    "van-cell-group": "miniprogram/miniprogram_npm/@vant/weapp/cell-group/index",
    "van-field": "miniprogram/miniprogram_npm/@vant/weapp/field/index",
    "van-submit-bar": "miniprogram/miniprogram_npm/@vant/weapp/submit-bar/index",
    "van-tab": "miniprogram/miniprogram_npm/@vant/weapp/tab/index",
    "van-tabs": "miniprogram/miniprogram_npm/@vant/weapp/tabs/index",
"van-dialog": "miniprogram/miniprogram_npm/@vant/weapp/dialog/index"



  }

project.config.json

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}