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

微信小程序安装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下的,修改完之后就可以顺畅的使用啦

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值