微信开发者工具引入vant时package.json不存在

已于 2022-09-13 17:41:28 修改
阅读量4.5k 收藏 17
点赞数 9
文章标签： 小程序
于 2021-11-26 11:10:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Biu233/article/details/121553732
版权

直接上结论，如果你是新创建的小程序 只需在安装 Vant Weapp之前使用npm init生成 package.json文件就可以了，如果已经生成了小程序代码或者是已经开始的项目那么请继续往下看

按照 Vant Weapp 官网的快速上手，你会发现提示
在这里插入图片描述
所以这时我们需要创建所需的package.json文件
使用npm init生成，一直回车就行
在这里插入图片描述
最后输入y回车，重新工具→构建npm
你以为这就成功了？NONONO
在这里插入图片描述
当你直接开始使用组件的时候会出现***未找到
在这里插入图片描述
仔细看下这时候只有 node_modules ，是没有 miniprogram_npm 这个文件夹的
在这里插入图片描述
我们需要
1.删除现在的 node_modules 文件夹
2.执行npm install
3.执行npm i @vant/weapp -S --production
在这里插入图片描述
这样 miniprogram_npm 文件夹就出来了，这样一切都正常了。

忘了说一件事情了，如果你没出现就当我没说吧，从上面的截图可以看到我这个样式没有出现
自己上网找了很多也没找到原因（app.json 中的 “style”: "v2"早就删除了，不要说是因为这个），最后发现跟微信开发者工具的调试基础库有关系，可以适当的降降版本，样式就出现了。
在这里插入图片描述
这是之前的
在这里插入图片描述

莫得香菜
关注
  • 9
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
微信小程序引入Vant组件库过程解析
11-30
前期准备 Vant Weapp组件库： https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端： 然后初始化一个package.json文件：输入命令：npm init 然后一路回车默认的即可： npm init 项目就回产生一个package.json文件： { "name": "miniprogram", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no
npm install 报错不存在package.json
热门推荐
A_bet_of_three_years的博客
08-27 2万+
npm WARN saveError ENOENT: no such file or directory, open '/Users/macbookpro/package.json' npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN enoent ENOENT: no ...
微信小程序weui的使用(1)，web前端开发规范手册
2401_84097393的博客
04-06 746
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取[外链图片转存中…(img-kvt4zv0a-1712341136793)]
无package.json无法安装
我是我
11-03 3928
问题：我们在新建一个文件夹准备学习和安装某些安装包时，发现并没有package.json文件，无法在控制台中通过yarn add 或 npm install 进行安装。 解决方案：npm init -y 我们可以通过在该路径下执行指令： npm init -y 后生成一个package.json文件，并将其中的内容按照自己的需求进行修改， 之后就可以在控制台中通过指令进行各种安装，就可以安装成功啦！ 留档记录，希望也可以帮助到你哦~ ...
微信小程序引入vant-weapp
01-03
选择位置新建项目，本文直接在桌面新建项目 1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production  3 构建npm包 步骤二 构建 npm 包 打开微信开发者工具，点击 
微信小程序引入VANT组件的方法步骤
12-13
1.右键项目名称->在终端中打开 2.在终端输入 npm init 用来初始化，然后一直回车默认就Ok。 之后项目中会出现 project.config.json 内容为当前项目的配置信息以及依赖包的管理。 3.安装vant依赖包(在终端输入) npm i vant-weapp -S --production 4.进入小程序开发工具，选择左上角 工具->构建npm 完成之后项目里会多出依赖包 5.点击右上角详情并勾选使用npm模块。 6.选择要在哪个pages里使用该组件 这里以pages下的movie举例，写一个简单的按钮。 如图 在对应的json文件中
小程序中无package.json文件 ----（去npm插件一直无法下载进入小程序中）
m0_68630350的博客
10-13 921
新建小程序项目一般没有package.json，package.json是第三方插件的管理文，使用npm 可以对项目进行package.json文件的初始化，把要进行package.json文件的项目在终端上打开，运行“npm init -y”命令，就可以了。拥有了package.json文件就可以npm插件啦！
npm安装包成功，目录下却没有package.json文件解决方案
zhang1509123907的博客
01-18 1万+
终于解决npm安装包报错之后，我发现我安装包的目录下并没有package.json，翻了下百度，我是参考以下文章解决的 为什么在“npm install express”之后我的目录中没有package.json？ - Thinbug 直接在该目录下跑npm install module --save这个命令 npm install module --save 跑完后发现我安装的包上面都没有信息，于是我直接在安装依赖的时候在最后面加上-S npm install 包 -S json文件.
npm run dev 找不到package.json文件，怎么办……
2201_75806156的博客
03-29 1321
问题描述：D:\可视化\项目二资料\PeachVueTemplate/package.json。找到之后，在这个当前文件夹目录使用cmd命令，就可以进行后续的操作了。解决办法：在下一级找到json文件。问题3：npm run dev。文件，启动项目路径不正确。
[微信小程序] 项目引入vant组件库 npm构建问题 避坑
jinwenshuo2007的博客
07-18 1907
按照Vant Weapp官网的快速上手，构建npm时发现报错
解决 npm install报package.json未找到问题
gz775的专栏
10-26 4601
解决 npm install报package.json未找到问题
微信小程序使用 vant Dialog组件的正确方式
10-15
主要介绍了微信小程序使用 vant Dialog组件的正确方式，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vant.min.js/css
06-12
把vant的css和js文件导入html项目，可以在html页面引用vant组件，避免使用连接访问的难以维护的麻烦。
vue项目没有package.json文件
weixin_52941842的博客
03-01 6128
终端输入npm init 然后一直点回车，直到出现package相关配置
微信小程序使用Vant组件引入
darcy217的博客
03-26 906
微信小程序使用Vant组件，出现 Component is not found in path 错误 ##初始化：确保 工具>构建npm success avoid：npm package was not found npm init npm install --production npm install --save miniprogram-recycle-view 需要注意的是 pac...
当·package.json丢失
qq_42676176的博客
06-27 3408
当package.json丢失，对package.json作用、意义的思考，对问题解决方案的记录
生成package.json文件报错“系统找不到指定的路径”
howard2005的专栏
01-30 1038
系统找不到指定的路径
微信小程序使用vant组件所出现的一些问题
子玉的博客
11-24 1144
第三个是在根目录中，文件project.config.json内， "setting"对象中添加，注意，这个与官方配置有些不同，本身这个对象"miniprogramNpmDistDir":"./"，的属性值是有个地址的，但是我的第三个问题所提示的错误就是找不到路径，多了一层，这个根据 自身情况，如果加上路径报错，那就换成“./”路径。1. 确保你在正确的目录下：确认你当前所在的目录是你的小程序项目的根目录，即包含app.json和project.config.json等文件的目录。希望对大家有所帮助！
【Vue脚手架避坑】创建vue-cli后报错找不到package.json文件
大三计算机科班学生热衷于技术分享，结识志同道合的伙伴
03-18 1586
【Vue脚手架避坑】创建 vue-cli 后报错找不到 package.json 文件
微信开发者工具使用vant
最新发布
04-19
微信开发者工具是一款于开发和调试微信小程序的集成开发环境（IDE），而Vant是一套基于Vue.js的移动端组件库，提供了丰富的UI组件和交互效果，可以帮助开发者快速构建小程序界面。 要在微信开发者工具中使用Vant，可以按照以下步骤进行： 1. 在微信开发者工具中创建一个新的小程序项目。 2. 在项目目录下找到并打开`project.config.json`文件，在`setting`字段中添加以下配置： ``` "packOptions": { "ignore": [ "node_modules/**" ] } ``` 这样可以忽略掉`node_modules`目录，避免编译错误。 3. 在项目根目录下打开终端或命令行工具，执行以下命令安装Vant： ``` npm install vant-weapp -S --production ``` 这将会将Vant的相关文件安装到项目的`node_modules`目录下。 4. 在微信开发者工具的菜单栏中选择“工具”->“构建npm”，等待构建完成。 5. 在小程序页面的json文件中引入需要使用的Vant组件，例如： ```json { "usingComponents": { "van-button": "vant-weapp/button" } } ``` 6. 在小程序页面的wxml文件中使用Vant组件，例如： ```html <van-button type="primary">按钮</van-button> ``` 这样就可以在小程序中使用Vant的组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值