微信小程序引入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"
    }
相关推荐
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J1 天前
管理100个小程序-很难吗
android·小程序
qq_357389631 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计2 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰2 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa2 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。2 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序