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

最新推荐文章于 2024-08-14 00:31:09 发布

PPAP__

最新推荐文章于 2024-08-14 00:31:09 发布

阅读量869

点赞数

文章标签：小程序 npm nodejs

本文链接：https://blog.csdn.net/PPAP__/article/details/110142247

版权

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

摘要由CSDN通过智能技术生成

第一步：安装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

WANZ30的博客

07-13

857

微信小程序 安装使用Vant Weapp

微信小程序中使用Vant Weapp组件库

qq_60976312的博客

02-02

727

微信小程序中使用Vant Weapp组件库

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

微信小程序 vunt weapp 安装方法

weixin_45934149的博客

03-17

1048

微信小程序 vunt weapp 安装方法 1.首先网页打开 vant weapp官网。https://youzan.github.io/vant-weapp/#/intro 2.找到 vant weapp 安装命令（点击快速上手）步骤一通过 npm 安装使用 npm 构建前，请先阅读微信官方的 npm 支持通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn add @vant/weapp --production 安装 0.

npm i vant-weapp -S --production安装报错，解决方法

最新发布

m0_65696193的博客

08-14

255

没有以管理员身份，进入cmd，所以没有权限下载npm install 内容。2、切换到想要的路径。

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

weixin_30606461的博客

07-10

356

安装过程中报错如下：解决方法：把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

1602

在小程序的根目录执行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组件库-傻瓜式教程（最新微信开发工具）

qq_32852047的博客

04-22

1204

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

npm构建vant-weapp

LittleBerlin2的博客

11-10

354

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的踩坑记录

10-16

微信小程序开发中引入第三方库，尤其是使用npm进行依赖管理，是开发过程中常见的一种需求。本文详细记录了在微信小程序项目中引入...希望本文分享的微信小程序npm引入vant-weapp的踩坑记录对其他开发者能够有所帮助。

微信小程序正确引入Vant Weapp

m0_63834711的博客

08-03

607

没有修改project.config.json里的代码，照样是可以用组件的，我也不知道是为啥要修改。这个问题是因为下载插件时，会自动添加一个node_modules文件夹但没有miniprogram文件。再次构建npm，会多一个同样的文件名。把外面的文件删除就好了，构建npm时也不会有路径问题什么之类的了。以上就是我的解决方案了，有不懂的可以评论区留言或者有问题的也可以评论留言讨论哦。我根据官网步骤，到后面构建npm时会报路径错误问题，如图。去除"style":"v2"此时，就会多一个文件夹。...

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

aihe1410的博客

05-19

1093

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

微信小程序使用npm包的方法步骤

10-16

主要介绍了微信小程序使用npm包的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

ParallelLight

04-24

490

之前体验了 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

2119

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

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

m0_72190449的博客

11-13

4442

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

微信小程序---使用npm包安装Vant组件库

cozy666的博客

12-15

1192

将 app.json 中的"style”:“v2” 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。通过npm npm i @vant/weapp@1.3.3 -S --production。注意：如果你的文件中不存在pakage.json，请初始化一下包管理器 npm init -y。通过yarn yarn add @vant/weapp --production。1.通过 npm 安装(建议指定版本为@1.3.3）3.修改app.json。

微信小程序怎么构建npm？

qq_37805832的博客

09-04

6146

因为系统引入外部UI库时需要的。不然外部的UI库运行不起来.