微信小程序npm安装Vant weapp（保姆式安装）

最新推荐文章于 2025-09-30 09:16:35 发布

原创

最新推荐文章于 2025-09-30 09:16:35 发布 · 977 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #npm #nodejs

本文详细介绍了如何一步步在微信小程序中通过npm安装并使用Vant weapp UI库。从安装node.js和npm，到运行npm命令，再到微信小程序中启用npm模块和构建，最后解决可能出现的组件缺失问题，确保顺利使用Vant weapp。

第一步：安装node.js（node安装包括npm）…(安装node的就不说了)

在这里插入图片描述
安装成功如上图cmd打印有版本号

.
.

第二步：右键“在终端打开” cmd窗口中输入 npm init -y

在这里插入图片描述
出现package.json文件

.
.
.

第三步：继续在该cmd窗口输入 npm i @vant/weapp -S --production

在这里插入图片描述
文件夹出现 node_modules 文件夹（这个文件夹就包含Vant的所有组件）

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

PPAP__

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序引入vant-weapp组件教程

猿小白的博客

03-07

979

本章教程，介绍如何在微信小程序中引入vant-weapp。

微信小程序 安装使用Vant Weapp

WANZ30的博客

07-13

1059

微信小程序 安装使用Vant Weapp

参与评论您还未登录，请先登录后发表或查看评论

【微信小程序】使用npm安装Vant Weapp组件库-傻瓜式教程（最新微信开发工具）

qq_32852047的博客

04-22

1409

Vant Weapp组件库官方手册 https://youzan.github.io/vant-weapp/#/quickstart 首先确保本机已有npm环境，如没有安装，自行百度 https://jingyan.baidu.com/article/e4511cf38c05092b845eaf9b.html 安装成功之后出现以下说明安装成功打开微信开发工具新建一个demo测试小程序 新建一个demo页面方便测试打开调试器，选择终端，点击新建终端新建完成后光标一直末尾输入命令 npm ini.

Uniapp 微信小程序使用 Vant Weapp 完整指南

最新发布

热爱编码，享受创造

09-30

1272

Uniapp 集成 Vant Weapp 微信小程序组件库指南本指南详细介绍了如何在 Uniapp 项目中集成和使用 Vant Weapp 组件库：环境配置 - 通过 npm 安装 Vant Weapp 并进行微信开发者工具和 Uniapp 项目配置组件引入 - 提供全局引入、页面级引入和使用 easycom 三种方式基础使用 - 以按钮组件为例展示基础用法和不同状态配置表单实战 - 演示表单组件的综合应用，包括输入验证和选择器 Vant Weapp 提供了丰富的 UI 组件

微信小程序如何进行npm导入组件

m0_72168336的博客

03-31

5107

微信小程序通过npm引入组件

微信小程序npm安装vant并使用

weixin_30606461的博客

07-10

414

安装过程中报错如下：解决方法：把miniprogram_npm/vant-weapp里的组件文件夹都删除，之后再https://github.com/youzan/vant-weapp下载一份vant，将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）中的文件复制到miniprogram_npm/vant-weapp（即下载一份vant，...

微信小程序引入Vant Weapp

Only、的专栏

08-28

1674

在小程序的根目录执行npm init一路回车yes生成package.json文件引入Vant Weapp，在小程序的根目录执行,生成node_modules npm i @vant/weapp -S --production 使用npm模块打钩，工具-》构建npm，结束出现miniprogram_npm 微信小程序使用内置样式，app.wxss文件中加入 @import "miniprogram_npm/@vant/weapp/common/index.wxss"; 1 Vant W

微信小程序npm引入vant-weapp的踩坑记录

12-01

微信小程序项目使用npm安装vant-weapp的正确步骤使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装...

微信小程序安装VantWeapp

weixin_53805188的博客

01-05

947

在安装以前必须先检查是否有node,在终端输入node -v即可查看，没有的话就先安装node我按照官方文档（）安装的时候，到最后构建npm发现提示/xxxxxxxxx/mytest/node_modules/@babel/runtime/index.js: 未找到npm包入口文件后来发现是缺少package.json文件，于是修改 project.config.json文件复原以后在终端执行如下命令，卸载安装的VantWeapp。

【微信小程序】使用npm并引入vant-weapp组件库

RogerQianpeng的博客

12-06

740

vant文档与微信小程序文档写得弯弯绕绕，你引用我，我引用你，还给出了多种不同情况下的选项，甚至有步骤缺失，导致踩了一点小坑，浪费了一些没必要的时间，这里给出完整可行的实现方法，以供参考。首先，当然是先建一个微信小程序新建一个终端，执行，进行npm初始化，会生成一个package.json 此条在官方文档中未说明下载一下此条官方文档给出了多条选择打开app.json，删除此条官方文档在“注意”中说明了现在普遍使用的新版本配置方法屏幕最顶栏菜单，菜单-工具-构建npm 在app.json中引入具体组件，然

npm构建vant-weapp

LittleBerlin2的博客

11-10

427

npm构建vant-weapp 1. 打开指定文件的cmd 2. 执行npm i vant-weapp -S --production 3. 如果出现package.json相关报错则执行npm init -y 4. 接着重新执行npm i vant-weapp -S --production 5. 打开微信开发者–工具–npm构建 6. 在json文件中引入组件“usingComponents:{}”后就能在wxml文件中使用 ...

微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法_weappdev

2501_90403950的博客

01-29

777

2.3 - 看到下图证明npm 初始化成功根据上面的步骤，现在npm 初始化完成啦，现在去安装vant - weapp 库。

微信小程序 vant Weapp 安装和使用

qq_34975445的博客

04-20

1649

1.安装步骤一通过npm安装需要注意的是package.json和node_modules必须在miniprogram目录下 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --pr...

微信小程序项目使用npm安装vant-weapp的正确步骤，简单易懂！！

aihe1410的博客

05-19

1152

微信小程序项目使用npm安装vant-weapp的正确步骤 1、在当前小程序项目目录npm init -y 构建npm项目 2、运行命令 npm install vant-weapp -S --production安装完发现在当前小程序目录下新增node_modules目录下面有了vant-weapp组件文件夹如下图： 3、详情里面：选中使用npm模块 4、进入微...

小程序 | 使用 npm 模块配置 Vant Weapp 框架

ParallelLight

04-24

591

之前体验了 iView 的UI框架，感觉还可以主要是因为在开发体验上比原生敲代码好很多，不过 iView 框架可利用的组件较少，比如搜索框的组件等并未涉及，而且已有的组件也存在一些需要自行生硬的修改才能实现的问题（也可能是自己有点儿菜没掌握精髓），不过总的来说还是蛮不错的，继 iView 之后，最近新体验了一下 Vant UI 框架，新学习了 npm 模块配置框架，体验感有所上升，也不辜负CV操作之后学到了新东西。这篇文章主要记录使用 npm 模块配置 Vant UI 框架文章目录1.使用cm.

微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法

热门推荐

zxh7770的博客

03-26

2万+

微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法 1，搭建小程序 1.1 项目 - 新建项目 - 如下图所示： 1.2点击图中“新建”即可创建成功小程序项目。 2，安装vant- weapp库 2.0 - 在安装vant- weapp之前我们需要先初始化npm，然后在安装vant- weapp； 2.1 - 使用cmd命令行进入项目根目录，在项目根目录下面初始化npm ...

【微信小程序】基础篇 -- 使用 npm 包 - Vant Weapp（四十一）

JMFive的博客

03-15

2602

大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第41篇文章;今天开始学习微信小程序的第22天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。

微信小程序npm安装，保姆级图文教程，步骤齐全

qq_66364610的博客

07-15

8201

Ps:项目名字不能有中文，如果有中文的话输入英文，然后一直回车看到看到Is this OK？如果没有中文同理一直回车就好。然后看到生成了一个package.json的文件。然后点击工具-->构建npm，即完成。

关于微信小程序安装npm的过程，从下载到小程序内部安装完成

m0_72190449的博客

11-13

5432

1.先从官网下载nodejs 网站为Node.js (nodejs.org)，选择左边第一个2 然后一直next，选默认就行选择自己喜欢的路径我的是D:\nodejs-v18.12.1 3 下载完成后，先在安装文件夹中新建两个文件夹 node_cache node_global 4 配置一下环境变量，如果不配置好就会导致微信微信小程序里面找不到路径的情况，打开控制面板->系统与安全->系统->高级系统设置->环境变量一共要配置三个地方一个是

微信小程序快速集成vant-weapp教程

这一步是为了让微信小程序能识别并使用 npm 包中的 vant-weapp 组件。 4. **引入 vant-weapp 组件** 构建成功后， vant-weapp 的组件已经准备就绪，可以在小程序的页面配置文件（如 `index.json`）中引入所需的...