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

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

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

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

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

    json 复制代码
       "packNpmManually": true,
        "packNpmRelationList": [
          {
            "packageJsonPath": "./miniprogram/package.json",
            "miniprogramNpmDistDir": "./miniprogram/"
          }
        ],
  3. 在miniprogram文件夹下执行安装命令

    shell 复制代码
    npm i @vant/weapp -S --production
  4. 在微信小程序开发工具(软件)上,左上角项目,重新打开项目

  5. 在微信小程序开发工具(软件)上,点击工具->构建npm

  6. 然后你会看到在miniprogram下多了一个miniprogramnpm的文件夹,这就正常了

  7. 如果你是ts,按照官方文档更改ts的支持

  8. 引入组件是在app.json中

    shell 复制代码
    // 通过 npm 安装
    // app.json
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
相关推荐
web_Hsir4 分钟前
uniapp 微信小程序 使用ucharts
微信小程序·小程序·uni-app
web_Hsir5 分钟前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
fakaifa2 小时前
beikeshop多商户跨境电商独立站最新版v1.6.0版本源码
前端·小程序·uni-app·php·beikeshop多商户·beikeshop跨境电商
Angus-zoe2 小时前
微信小程序唤起app
微信小程序·小程序
不老刘3 小时前
微信小程序使用 Vant Weapp 组件库教程
微信小程序·小程序·vant
橘猫云计算机设计3 小时前
基于springboot微信小程序的旅游攻略系统(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·微信小程序·毕业设计·旅游
Mr.Liu64 小时前
小程序30-wxml语法-声明和绑定数据
前端·微信小程序·小程序
清风絮柳14 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域14 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源
小程序照片合成16 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码