微信小程序引入vant 提示没有可以构建的npm包

最新推荐文章于 2023-10-22 13:07:34 发布
最新推荐文章于 2023-10-22 13:07:34 发布
阅读量1.1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 问题解决demo 文章标签： 微信小程序 Vant Weapp组件 微信小程序组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/C_zhihao/article/details/107350968
本文详细介绍了在微信小程序中引入vantUI组件的具体步骤，包括npm初始化、安装组件、构建npm包及引用组件等过程，帮助开发者快速上手。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天尝试在微信小程序中引入vant UI组件，然后按照官网说明去npm安装，然后点击工具构建npm，却一直提示没有可以构建的npm包

经过仔细查阅官方文档和找了一波技术帖，最终按照以下步骤成功引用vant UI

1. 在项目根目录下npm init，然后一路回车

2.npm i vant-weapp -S --production  安装

3.微信开发者工具>工具>构建npm   构建完成生成miniprogram_npm文件夹

3.详情>使用npm模块

4.在首页引用组件

至此，就已经成功引用了，在查找为什么文章开始说的问题的时候，看到的帖子中都提到了要去下载压缩包，然后并把dist文件夹放进去的操作，我这里并没有，我猜测可能是框架更新之后就不需要了，如果有知道原因的也烦请留言告知

微信小程序引入vant-weapp组件教程
猿小白的博客
03-07 679
本章教程，介绍如何在微信小程序中引入vant-weapp。
微信小程序引入Vant插件
℡メ㏑╭ァ小凯
02-27 1184
然后在终端执行获取Vant代码。安装完成后点击npm构建。使用正常按官网的使用即可。
【无标题】微信小程序使用npm，（以vant为例）
weixin_43444977的博客
10-20 663
4、修改project.config.json。执行完后，会生成package.json文件。1、新建一个小程序项目，在【终端】输入。出现 node_modules 文件夹。出现miniprogram_npm。在index.json文件中配置。3、【工具】——【构建npm】6、使用一个button为例。
微信小程序中使用npm引入vant weapp
lindali1115的博客
11-18 506
一.思路 1.在小程序根目录内，初始化npm 2.在小程序中执行命令安装 npm 包 3.在微信开发者工具中的菜单栏：工具 --> 构建 npm 4.在微信开发者工具中的菜单栏：工具 --> 项目详情， 勾选“使用 npm 模块”选项： 5.使用组件库 6.使用其他npm 包方法 二.具体步骤 1.新建一个小程序 2.在小程序根目录内，初始化npm，初始化后的文件会多一个package.json 3.在小程序中执行命令安装 npm 包 (这边安装的是vant) ..
微信小程序npm构建+vant导入使用
fdcsdn_的博客
08-24 330
小程序中构建npm 首先先检查是否安装了npm 没有安装npm需要安装npm npm -v 注意点：当node环境配置在了c盘的情况下 会导致在使用npm下载插件时打不开c盘文件夹 导致安装失败的情况 小程序开发者工具需要管理员权限运行 也可以重新配置一次nodejs环境到其他盘（我懒 我就管理员运行了） 初始化项目 npm init -y -y 表示项目选项全部默认 此时不会出现 miniprogram_npm 文件夹 这一步只是为了package相关的文件 下载相关依赖 例：van
vue打包后static中的文件未打包进去
qq_37176498的博客
08-20 4422
在vue中未使用到的静态资源文件，例如：引用在index.html的js的（此处不知为何，vue打包认为其为未引用），后端返回才引用到的图片等文件。 目前只涉及到此两类，后续再补充。 打包时static中的文件不会一起拷贝到dist的static中。 使用webpack中打包拷贝静态文件CopyWebpackPlugin插件 copyWebpackPlugin： 　　作用：用于webpack打包时拷贝文件的插件包 　　安装：npm installcopyWebpackPlugin@版本号 　.
微信小程序引入Vant组件库过程解析
11-30
Vant Weapp 是一个专为微信小程序设计的组件库，它提供了丰富的 UI 组件，可以帮助开发者快速构建美观、统一的用户界面。Vant Weapp 基于 Vant UI，是一个在移动端广泛使用的前端框架 vant 的微信小程序版本。 **...
微信小程序引入Vant Weapp
2301_78435981的博客
10-22 353
注意：如果构建时出现miniprogram找不到时，将miniprogramNpmDistDir配置修改为为'./'①将packNpmManually:false修改为packNpmManually:true。# 通过 npm 安装 npm i @vant/weapp -S --production。# 安装 0.x 版本 npm i vant-weapp -S --production。②再packNpmRelationList里面添加如下代码。选项，构建完成后，即可引入组件。4.自定义tab失败。
微信小程序引入vant-weapp
01-03
选择位置新建项目，本文直接在桌面新建项目 1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell... 3 构建npm包 步骤二 构建 npm 包 打开微信开发者工具，点击 
微信小程序引用Vant组件库message： 没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内...
wxqwxq123444的博客
08-31 888
message： 没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内，或配置 project.config.json 的 packNpmManually 和 packNpmRelationList 进行构建
微信小程序中npm安装vant weapp框架时出现构建npm失败的问题详解
前端-尔嵘
09-10 3139
首先在小程序的详情里面把使用npm模块勾上； 尔嵘 其次，windows+r输入cmd打开终端，找到该项目的路径并进去，路径一定得正确！！！终端默认在c盘。比如你的项目路径在d盘下的某个文件： 输入cd\ 然后按回车键 ，你会发现指示符变成了C：\> 。 然后在这行输入d: 再次按回车键确定，你就完美的进入D盘了，至于后面你想访问D盘中的文件夹，只需输入 “cd\文件夹名” 即可...
解决:微信小程序 Vant Weapp 没有找到可以构建的NPM包，请确认需要参与构建的npm在miniprogramroot目录
热门推荐
I,Pencil
11-24 1万+
最近学习Vant Weapp的组件库，结果构建npm的时候翻车了，回去查了官方文档，原来要修改project.config.json文件 开发者工具创建的项目，miniprogramRoot默认为 miniprogram，package.json在其外部，npm 构建无法正常工作。 需要手动在 project.config.json内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。 { ... "setting": { ... "packNpmManually": tr
小程序npm引入vant-weapp的问题,没有找到可用的NPM包(已经解决)
weixin_45936604的博客
12-27 3060
微信小程序项目使用npm安装vant-weapp的正确步骤 使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装成功了，结果 没有找到npm包 这让我纠结了一个早上。看了文档，琢磨了很久，最后研究出问题的关键。 第一步：使用cmd进入项目根目录：n...
微信小程序使用 vant 时，遇到的一些坑
Xpy 的博客
05-07 3237
# 通过 npm 安装 npm i @vant/weapp -S --production npm init -f
vant weapp 没有找到可以构建的npm包 / 微信小程序引入 vant weapp 前端框架
royla的博客
05-01 1729
按照 vant-weapp 官方文档的说明操作之后，依然无法在微信小程序项目中引入 vant-weapp 前端框架。记录一下 1、新建一个微信小程序，并在项目根目录下新建一个 @vant 文件夹，再在 @vant 文件夹下新建一个 weapp 文件夹 2、访问 vant-weapp 的 Github 项目 release 页面（https://github.com/youzan/van...
微信小程序没有找到可以构建的NPM包问题解决
qq_38110572的博客
07-14 4981
1.在小程序根目录下打开cmd 输入npm init -f 初始化命令 -f　　表示全部输入默认值 2.npm install --production docxtemplater构建npm项目的配置文件，作用好像是按需加载 这个命令生成了一个xxx.json文件 3.在微信开发者工具中，设置—>项目设置—>勾选使用npm模块 4.在微信开发者工具中，工具—>构建npm(出现如下图) 此步骤是验证是否可以构建npm。 ...
构建vant找不到npm入口
weixin_45019417的博客
10-23 286
构建vant找不到npm入口 摸爬滚打好几天，翻遍各个大佬的文章，终于解决了！ 首先： 删文件 删掉这四个文件，删干净 再在根目录的终端输入这个 一直回车即可 接着再输入npm i vant-weapp -S --production 但！问题又来了！ No description No repository field 这个我看到两个解决方法： 在package.json文件里的 “description”: “”,里面不为空，但我并不知道应该写什么，还有待学习~ 将项目声明为私有项目 也是在pa
使用vant的坑，没有找到构建的npm包
gonewithwind00的专栏
09-09 980
在小程序目录终端中打开终端 输入npm i @vant/weapp -S --production，下载vant成功，但报错 在工具中点击，构建npm。不成功，报错 分析是因为没有package.json 因此应该先： 使用 -y 标记表示你能接受 package.json 文件的一些默认值： npm init -y 生成了一个packag.json文件 再进行 npm install 例如： npm install @vant/weapp -S --production.
微信小程序 使用 Vant 组件库 无法构建npm
最新发布
03-24
### 微信小程序 Vant 组件库构建 NPM 失败解决方案 在微信小程序开发过程中，当尝试使用 Vant 组件库时遇到无法构建 NPM 包的情况，通常是因为项目配置文件未正确设置或缺少必要的依赖项。以下是针对该问题的具体分析与解决方法。 #### 1. 确认 `miniprogramRoot` 目录内的 NPM 包 确保所有的 npm 包都位于项目的 `miniprogramRoot` 目录下。如果某些包不在指定目录内，则可能导致构建失败。可以通过调整 `project.config.json` 文件中的 `packNpmManually` 和 `packNpmRelationList` 参数来手动管理需要打包的 NPM 资源[^1]。 ```json { "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "node_modules/@vant/weapp/package.json", "alias": {} } ] } ``` 上述代码片段展示了如何通过 `packNpmRelationList` 显式声明需要参与构建的 NPM 包路径及其别名映射关系。 #### 2. 检查并更新 `usingComponents` 对于每个页面或组件，在其对应的 JSON 配置文件中需正确定义所使用的 Vant 组件路径。例如： ```json { "usingComponents": { "van-button": "@vant/weapp/button/index" } } ``` 此步骤确保了各页面能够正确加载所需的 Vant 组件资源[^3]。 #### 3. 移除不必要的样式版本控制字段 如果发现部分组件样式未能正常显示，可能由于小程序基础库强制应用了一些默认样式而导致冲突。此时应移除 `app.json` 中关于 `"style"` 字段的相关定义（即删除 `"style": "v2"`），从而避免新版基础组件带来的额外影响[^2]。 #### 示例代码：完整的按钮组件引入方式 以下是一个完整示例，展示如何在一个页面中成功集成 Vant 的 Button 组件： ```javascript // index.js Page({ data: {}, }); ``` ```html <!-- index.wxml --> <view> <van-button type="primary">主要按钮</van-button> </view> ``` ```json /* index.json */ { "usingComponents": { "van-button": "@vant/weapp/button/index" } } ``` 以上内容涵盖了从基本配置到实际操作层面解决问题的方法论。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值