微信小程序引入vant-weapp爬出坑

天才梦浪2023-12-09 23:57

最新的微信小程序的项目结构跟之前的不一样，然后，按照vant-weapp上的官方文档，安装步骤失败，提示了各种错误。如果你的微信小程序结构跟我的一致，可以采用和我一样的方案。

移动package.json到miniprogram的文件夹下

更改project.config.json的内容，添加一下内容

json 复制代码

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

在miniprogram文件夹下执行安装命令
shell 复制代码
```
npm i @vant/weapp -S --production
```
在微信小程序开发工具（软件）上，左上角项目，重新打开项目
在微信小程序开发工具（软件）上，点击工具->构建npm
然后你会看到在miniprogram下多了一个miniprogramnpm的文件夹，这就正常了
如果你是ts，按照官方文档更改ts的支持

引入组件是在app.json中

shell 复制代码

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}