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

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

  1. vant weapp message:发生错误 Error: C:\Users\海俊\Desktop\miniprogram-1\package.json 未找到 appid: wx3457b1f63

    步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp --produ ...

  2. 微信小程序开源Demo精选

    微信小程序开源Demo精选 原文:微信小程序开源Demo精选 1. 仿QQ应用程序(#社交 #聊天 #SNS) 地址:https://github.com/xiehui999/SmallAppForQ ...

  3. 微信小程序-04-详解介绍.json 配置文件

    致我自己:小程序开发不是简单一两天的事,一两天只能算是了解,有时候看多了会烦,感觉很熟悉了,其实只是对表面进行了解,对编程却知之甚少,小程序开发不是简单的改模板,一两天很多部分改模板可能都做不到,坚持 ...

  4. 微信小程序之配置app.json

    微信小程序之配置app.json 本人写了一个在线扫码借书的小程序,打算分享一下心得和代码,欢迎关注,再次希望各位大佬指出不足 {"pages": ["pages/ind ...

  5. 微信小程序 Unexpected end of JSON input

    微信小程序 Unexpected end of JSON input 核心解决:encodeURIComponent和decodeURIComponent 跳转 jumpTopic(e) {const ...

  6. 微信小程序全局配置文件app.json中window:backgroundColor“不生效”

    那些年我们一起踩过的坑~ 今天说一下微信小程序全局配置文件app.json中window的backgroundColor属性,设置之后发现没效果. 查了资料发现原来这个backgroundColor属 ...

  7. 微信小程序学习DEMO,微信小程序初学者可以参考

    这是一套微信初学者学习DEMO源码,有需要的同学可到下载频道下载~ 这个微信小程序包含了以下几个功能,非常适合微信小程序开发小白,公司实习生,毕业设计参考. 1.朋友圈功能,可以发布朋友圈,九官格图片 ...

  8. active server pages 错误 asp 0126_微信小程序全栈开发课程【视频版】2.1 小程序前端页面初始配置、ESlint格式错误...

    点击观看视频 ↓↓↓ 小程序前端页面初始配置.ESlinthttps://www.zhihu.com/video/1195030595196223488 课程文字版 1.修改src/pages文件夹 ...

  9. 微信小程序开发demo

    前言 链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...

最新文章

  1. POJ 2485-Highways
  2. 服务器 .err文件,IIS 关闭HTTPERR(IIS日志)的方法
  3. centos下搭建Jenkins持续集成环境(安装jenkins)
  4. python-Django环境搭建
  5. 三元表达式列表解析生成器表达式
  6. 二分答案——H指数(Leetcode 274)
  7. python 只取年月日 字符串_Python基础:数据类型和变量amp;字符串和编码
  8. python中sorted()函数的用法_Python中的Sorted()函数
  9. nginx做代理服务
  10. [动态规划]ACM预选赛F题 侠客行
  11. CAD卸载/完美解决安装失败/如何彻底卸载清除干净cad各种残留注册表和文件的方法
  12. 谈谈如何做到从未来看向当代的能源技术
  13. html全景直播播放器,Insta360 Player(全景视频播放器) V2.3.6 官方版
  14. iphone屏幕镜像如何全屏_手机投屏到电视的照片如何全屏显示?
  15. ready与onload的区别
  16. 浅谈智能家居安防监控的重要性
  17. 腾讯云服务器用户名在哪里看,腾讯云服务器如何查看账号操作日志信息
  18. 【JavaScript】网页轮播图
  19. 【影像学基本知识】MR----T1,T2
  20. Hack The Box——Scavenger

热门文章

  1. 山东大学软件学院操作系统实验1(关于环境)
  2. 【FPS】处理视频时帧率计算及显示
  3. ue4 UI和纹理尺寸
  4. matlab histc的用法,matlab的hist函数应用技巧及使用方法
  5. Ubuntu技巧:linux下以人易读形势查看文件大小
  6. 两个程序员造就10000亿快手!此刻,宿华身价1300亿
  7. navicat for Oracle 连接远程oracle配置
  8. JAVA获取当前时间并作比较
  9. java 获取当前时间的毫秒值
  10. python字典查询_python字典用法