vant weapp 没有找到可以构建的npm包 / 微信小程序引入 vant weapp 前端框架

最新推荐文章于 2022-09-04 18:10:16 发布
最新推荐文章于 2022-09-04 18:10:16 发布
阅读量1.6k 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/royla/article/details/105880779
版权

按照 vant-weapp 官方文档的说明操作之后，依然无法在微信小程序项目中引入 vant-weapp 前端框架。记录一下

 

1、新建一个微信小程序，并在项目根目录下新建一个 @vant 文件夹，再在 @vant 文件夹下新建一个 weapp 文件夹

2、访问 vant-weapp 的 Github 项目 release 页面（ https://github.com/youzan/vant-weapp/releases ）下载当前最新版本的压缩包，解压后将 dist 目录下的所有内容复制到刚才新建的 @vant 文件夹下的 weapp 文件夹中

3、以 Button 组件为例，只需要在 app.json 或 index.json 中配置 Button 对应的路径即可（注意引入的路径，是 /@vant/weapp/button/index ，而不是官方文档中的 @vant/weapp/button/index ）

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
微信小程序 vant-weapp “@vant/weapp/button/i2ndex“ 未找到【已解决】
qq_39547040的博客
07-29 1834
vant/weapp/button/i2ndex" 未找到
关于Vant Weapp中组件引入未找到的解决方案
热门推荐
佐斌的笔记簿
07-06 1万+
在开发微信小程序时，需要引入一些第三方UI库，这时就需要用到微信小程序的 UI，分享一些遇到的问题 Vant Weapp框架引入组件失败问题: 使用Vant 组件 [“usingcomponents”][“van-button”]: “@vant/weapp/button/index” 未找到： 当出现: vm192:2 miniproject/app.json: ["usingcomponents"]["van-button"]: "@vant/weapp/button/index" 未找到 解决方案
微信小程序 引用 vant-weapp 没有找到 node_modules 目录 解决办法
iotjin的专栏
09-21 1万+
一、cmd 打开终端， cd到项目路径下，执行下面几步 1、（初始化npm项目）：npm init 2、（生成package-lock.json，记录使用的第三方插件）：npm install --production 3、（引入第三方组件 有赞）： npm i vant-weapp -S --production 第1步操作后一直按回车，直到...
微信小程序引入vant-weapp后出现[‘vant-XXX‘]:‘@vant/weapp/xxx‘未找到，错误解决
weixin_44375583的博客
09-04 1945
vant-xxx组件未找到的错误解决
微信小程序引入vant与解决[ app.json 文件内容错误] [“van-button“]: “@vant/weapp/button/index“ 未找到
Fanqie_KK的博客
05-19 6050
下面模拟小白引入vant所遇到的问题与[ app.json 文件内容错误] ["van-button"]: "@vant/weapp/button/index" 未找到 1，利用npm引入vant组件，在目录下初始化组件库 命令：npm init 按ENTER键直到最后回yes好了 2，npm i vant-weapp -S --production 3，回到小程序构建npm 4，此时可能会出现这样的一个问题说没有找到可构建的npm的包 5，你回到miniprog.
微信小程序引入vant-weapp
01-03
npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production  3 构建npm包 步骤二 构建 npm 包 打开微信开发者工具，点击 
微信小程序npm引入vant-weapp的踩坑记录
10-16
主要给大家介绍了关于微信小程序npm引入vant-weapp的踩坑记录，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
微信小程序使用Vant Weapp组件库的方法步骤
12-11
Vant Weapp 是一个专为微信小程序设计的组件库，它基于 vant 的 UI 设计语言，提供了丰富的 UI 组件，可以帮助开发者快速构建出美观且易用的小程序界面。 **引入 Vant Weapp 组件库** 1. **初始化项目**: 在终端中...
微信小程序引入Vant组件库过程解析
11-30
Vant Weapp 基于 Vant UI，是一个在移动端广泛使用的前端框架 vant 的微信小程序版本。 **引入 Vant Weapp 组件库的过程分为以下几个步骤：** 1. **前期准备：** 首先，你需要确保已经安装并配置好了微信开发者...
使用Vant 组件 [“usingcomponents“][“van-button“]: “@vant/weapp/button/index“ 未找到：
欢迎进入小洋的博客！
01-12 1万+
使用Vant 组件 [“usingcomponents”][“van-button”]: “@vant/weapp/button/index” 未找到： vm235:1 miniprogram/app.json: ["usingcomponents"]["van-button"]: "@vant/weapp/button/index" 未找到 在开发微信小程序时，需要引入好看的UI库，这时就需要用到Vant UI，本人分享遇到的一些问题 解决办法： 1、需要先在miniprogram文件里初始化packa
解决[“usingcomponents“][“van-button“]: “@vant/weapp/button/index“ 未找到：
AEI的博客
06-30 8386
解决步骤： 命令行cd转到miniprogram目录(注意使用下面的命令行要在工程目录下cd) cd .\miniprogram\ 在这里生成package.json npm init -y 在这个目录下安装vant npm i @vant/weapp -S --production 由于我们是在miniprogram目录下安装的，所以就不用修改project.config.json了 保持默认就好： { ... "setting": { ... "packNpmM
小程序npm引入vant-weapp的问题,没有找到可用的NPM包(已经解决)
weixin_45936604的博客
12-27 2924
微信小程序项目使用npm安装vant-weapp的正确步骤 使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装成功了，结果 没有找到npm包 这让我纠结了一个早上。看了文档，琢磨了很久，最后研究出问题的关键。 第一步：使用cmd进入项目根目录：n...
微信小程序引入vant 提示没有可以构建的npm包
C_zhihao的博客
07-15 1061
今天尝试在微信小程序中引入vant UI组件，然后按照官网说明去npm安装，然后点击工具构建npm，却一直提示没有可以构建的npm包 经过仔细查阅官方文档和找了一波技术帖，最终按照以下步骤成功引用vant UI 1. 在项目根目录下npm init，然后一路回车 2.npm i vant-weapp -S --production 安装 3.微信开发者工具>工具>构建npm 构建完成生成miniprogram_npm文件夹 3.详情>使用npm模块 4...
微信小程序中npm安装vant weapp框架时出现构建npm失败的问题详解
前端-尔嵘
09-10 3043
首先在小程序的详情里面把使用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组件
superKM的博客
04-26 1万+
从小程序基础库版本2.2.1或以上、及开发者工具1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 直接创建小程序，从工具>构建npm，会弹出没有找到node_modules目录，因此以引入vant组件为例。 1，创建普通项目后在右上角详情中，打开使用npm模块。 2，鼠标放在目录上右键，打开终端，切换到根目录 3，直接使用np...
微信小程序 使用Vant 构建npm提示 找不到文件夹无法构建
Cvory
05-31 584
问题如图： 复现描述 我的npm init是在项目文件夹的根目录 VantJS官方文档： 就一直提示找不到miniprogram文件夹 miniprogramNpmDistDir应该指向你文件的根目录 我的根目录就是'./' 改成这样即可
ts版微信小程序 安装引入vant/weapp
最新发布
06-12
好的，针对你的问题，我可以给出一些安装和引入 Vant Weapp 组件库的步骤。请按照以下步骤操作： 1. 安装 Vant Weapp 组件库： ``` npm install vant-weapp -S --production ``` 2. 在 `app.json` 中全局引入 Vant Weapp 组件： ``` { "pages": [ // ... ], "window": { // ... }, "usingComponents": { // 引入 Vant Weapp 组件 "van-button": "vant-weapp/dist/button/index", "van-cell": "vant-weapp/dist/cell/index", "van-cell-group": "vant-weapp/dist/cell-group/index", // ... } } ``` 3. 在页面中使用 Vant Weapp 组件： ``` <van-button type="primary">按钮</van-button> <van-cell title="单元格" value="内容"></van-cell> <van-cell-group> <van-cell title="单元格" value="内容"></van-cell> <van-cell title="单元格" value="内容"></van-cell> </van-cell-group> // ... ``` 注意：以上是一些基本的使用方法，更多的组件和 API 请参考 Vant Weapp 的官方文档。另外，如果你使用 TypeScript 开发微信小程序，可以在对应页面的 `.ts` 文件中引入对应的组件，如下所示： ``` // 引入 vant-weapp 组件 import { Button } from 'vant-weapp'; // 使用 vant-weapp 组件 Button({ type: 'primary', text: '按钮', bindclick: 'handleClick' }); // ... ``` 希望这些步骤能够帮助到你。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值