【message:发生错误 Error: D:\微信小程序\second-demo\package.json 对应的 node_modules 不存在】

2023-11-05

微信小程序安装vant-weapp报 node_module不存在:

提示:这里简述项目相关背景:

想使用vant-weapp写小程序,在安装的时候踩了一些坑,记录一下


1.安装@vant/weapp

提示:这里一个一个来描述遇到的问题:

  • 我是根据官网,并且使用npm安装
# 通过 npm 安装
npm i @vant/weapp -S --production

但是由于我图方便,在一个包含几个项目的路径下执行了此命令,结果并没有安装成功,是由于后面初始化packge.json一直不成功才回头去发现,so,一定不要为了一时便利,其实反而带来更多麻烦,多此一举
so,一定要在需要使用的项目下执行安装命令
在这里插入图片描述

2.初始化packge.json文件

按照官网后面重要的一步是
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。因为现在的版本更新

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

照着修改project.config.json文件,然后照着官网去npm构建,会发现,会报找不到== packge.json==文件的错误 ,那么这个时候就需要在项目根目录下打开命令运行面板 输入下面命令

npm init

在这里插入图片描述
然后对于下面的给出的内容一路enter键,packge.json文件就生成了,并且还有一个 packge-lock.json和node_modules以及miniprogram_npm文件夹一起被生成
在这里插入图片描述
在这里插入图片描述
然后在去npm构建
在这里插入图片描述
显示成功
在这里插入图片描述

3.使用vant组件

当构建完成 我们需引用组件才能使用,组件可以在全局,也可以是单个页面

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

然后在想要使用组件的页面直接使用组件

<van-button type="primary">按钮</van-button>

但是如果不认真,一运行就会发现报错,难道== 引用==出错了?不,其实只需要修改一下路径
在这里插入图片描述
因为我们的@vant文件夹是在miniprogram_npm下的,修改完之后就可以顺畅的使用啦

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【message:发生错误 Error: D:\微信小程序\second-demo\package.json 对应的 node_modules 不存在】 的相关文章

随机推荐

  • [翻译] logstash中logback的json编码器插件

    翻译 logstash中logback的json编码器插件 掘金
  • SkylineGlobe TEPro 6.6.1 二次开发导出KML或者KMZ文件示例代码

    其实Skyline的fly文件跟kml文件很像很像 只不过一个是编码加密的 另一个早已经成为OGC的通用标准 喜欢Skyline的小伙伴们试试下面的代码吧 细心的人能发现彩蛋哦
  • ElementUI 日期范围选择器设置选择跨度一年、30天、7天

    一 思路 利用组件的picker options object 属性以及属性下的disabledDate和onPick来实现选择日期范围跨度设置 二 代码实现 设置选择范围跨度为一年
  • 操作系统王道考研复习——第三章(内存管理/存储器管理)

    操作系统王道考研复习 第三章 内存管理 存储器管理 3 内存管理 存储器管理 3 1 内存管理概念 3 1 1 内存管理的基本原理和要求 1 可执行程序的形成 2 程序的链接 1 静态链接 2 装入时动态链接 3 运行时动态链接 3 程序的
  • eosjs-ecc eos密钥和签名的javascript开发包中文文档

    eosjs ecc是eos官方处理密钥和签名的javascript开发包 eosjs ecc中文文档由汇智网翻译整理 访问地址 eosjs ecc中文手册
  • 学习总结——小熊派+ESP8266

    文章目录 一 知识点 1 小熊派 2 ESP8266 二 感想 1 小熊派 2 ESP8266 三 经验教训 反思 一 知识点 1 小熊派 1 HAL库的使用 2 点亮LED灯 3 配置GPIO 4 按键输入 循环查询 外部中断 5 串口
  • 【华为OD统一考试A卷

    在线OJ 已购买本专栏用户 请私信博主开通账号 在线刷题 运行出现 Runtime Error 0Aborted 请忽略 华为OD统一考试A卷 B卷 新题库说明 2023年5月份 华为官方已经将的 2022 0223Q 1 2 3 4 统一
  • 编程:数据开发经验

    基本框架 select field1 field2 field3 field4 数据合成 T4 from 基础数据 select sum count case when condition1 condition2 as field1
  • WinSCP安装教程

    WinSCP是适用于Windows的免费开源SFTP FTP WebDAV S3 SCP客户端 它的主要功能是在本地计算机和远程计算机之间进行文件传输 除此之外 WinSCP还提供脚本和基本文件管理器功能
  • .net @什么意思_U-Net:基于小样本的高精度医学影像语义分割模型

    原论文地址 U Net Convolutional Networks for Biomedical Image Segmentation Pytorch 实现 https github com milesial Pyt orch UNet
  • elasticsearch地理位置总结

    参考 https blog csdn net tang jian dong article details 104446526 https blog csdn net u013041642 article details 94416631
  • linux内核编译问题解决方法

    在linux内核编译过程中 可能会遇到有些文件没有的可能 下面是我用gcc4 6 2编译linux2 6 30 5内核过程中提示的错误 gcc error elf i386 No such file or directory OBJCOPY
  • linux下select()函数

    1 I O处理的模型有5种 1 gt 阻塞I O模型 在这种模型下 若所调用的I O函数没有完成相关的功能 则会使进程挂起 直到相关数据到达才会返回 如常见的对管道 终端 网络设备进行读写时经常会出现这种情况 2 gt 非阻塞I O模型 在
  • Python——基础学习xpath(爬虫)

    python三种解析方法 1 正则 2 bs4 3 xpath Python xpath解析 xpath解析是最常用且最便捷高效的一种解析方法 通用性最强 xpath解析原理 1 实例一个etree的对象 且需要将被解析的页面的源码数据加载
  • 转载,envi对高光谱进行辐射定标和大气校正

    原文地址 http blog sina com cn s blog 764b1e9d0102v59e html 目录 辐射定标和大气校正 概述 辐射定标 多光谱数据FLAASH大气校正 3 1 FLAASH输入数据要求 3 2 详细操作步骤
  • 去除list of list中的引号与括号

    经常分词后是List of list的结构 输出后会存在很多引号与方括号 它其实是一个list的嵌套结构 可以通过将内层的List转化为str再放入新的list中实现转化 a 我要发 SCI 然后 去 四川大学 读博士 result for
  • Laya 实操十七:物理引擎

    物理引擎 export default class test extends Laya Script constructor super Laya Scene3D load res LayaScene SampleScene Convent
  • Python清洗数据具体操作

    数据清洗是指在处理数据之前对数据进行预处理的过程 这个过程通常包括检查数据的完整性 清除数据中的缺失值 异常值和重复值 以及对数据进行格式转换和数据转换等 在 Python 中 可以使用 pandas 库来方便地进行数据清洗 下面是一些常见
  • Android 禁止RecycleView的滑动

    1 问题 使用RecycleView 时 如果数据量很少只有几个 需求不需要它上下左右滑动 在xml配置中加上Android scrollbars none 这只是去掉了滑动bar 但是RecycleView 上下还是能滑动 且有阴影 2
  • 【message:发生错误 Error: D:\微信小程序\second-demo\package.json 对应的 node_modules 不存在】

    微信小程序安装vant weapp报 node module不存在 提示 这里简述项目相关背景 想使用vant weapp写小程序 在安装的时候踩了一些坑 记录一下 1 安装 vant weapp 提示 这里一个一个来描述遇到的问题 我是根