小程序中如何使用vant Weapp

最新推荐文章于 2025-11-26 14:05:36 发布
原创 最新推荐文章于 2025-11-26 14:05:36 发布 · 656 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序 #npm #nodejs

本文详细介绍了在小程序中引入Vant UI组件库的步骤，包括确保Node.js环境、下载最新版本的Vant UI、使用npm进行初始化及构建，以及在json页面中配置组件路径。文章强调了版本选择的重要性，推荐直接下载最新版本以获取更多功能。

一. 电脑上必须有node,作为一个js老玩家这是必备的。

  1. 可以检测一下有没有
  2. 在命令行 node -v,检测node , npm -v检测npm
  3. 没有的话，这里下载node
  4. 科学上网什么都不说了，报错自己去百度，下面也是。

二. 下对版本

  1. vant官网上没有说怎么让小程序引用，我借鉴了一个老大哥的 引用vant，安装后也没什么问题，但是版本太低了，默认给你下载0.5几的版本，很多很多很多最新功能都不支持。所以就需要升级版本，但是我试了一下升级问题太多。所以，最好就是下载最新版本。

三. 最新正确步骤

  1. 在项目根目录 npm init ，全程回车，不输入任何配置信息。
  2. npm i @vant/weapp -S --production （重点! 意思是下载最新版本吧，求纠正）
  3. npm构建
  4. 在需要操作的json页在这里插入代码片
"usingComponents": { 
    "van-goods-action": "../../miniprogram_npm/@vant/weapp/goods-action/index",
    "van-goods-action-icon": "../../miniprogram_npm/@vant/weapp/goods-action-icon/index",
    "van-goods-action-button": "../../miniprogram_npm/@vant/weapp/goods-action-button/index"
  },
  1. 上面想引用什么组件可以自行改动。
微信小程序 - Vant Weapp UI 框架引入 Toast (轻提示)
🏆 前端领域优质创作者
11-12 763
官网介绍的不太清楚，这里记录一下。
使用vant构建一个微信小程序
impossible1994727的博客
04-27 2907
1、新建一个空白小程序 按照vant官网执行第一步： # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production //三选其一 2、初始化： npm init ...
小程序中使用vant框架
WeiflR10的博客
04-21 518
在你小程序的根目录下cmd命令进入 1.初始化npm 终端输入npm init，回车，根据提示输入项目信息（其实一直回车就可以了，会自动输入默认信息），成功后会在项目下生成package.json文件。 2.接下来生成package-lock.json，记录使用的第三方插件： npm install --production 使用--production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。 3. ......
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
轻量，可靠的小程序UI组件库 介绍 Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 支付宝扫描下方小程序二维码，体验组件库示例： 使用之前 在开始使用Vant Aliapp之前，您需要先阅读的相关文档。 npm 安装 通过npm安装使用（推荐） 通过npm安装 npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone https://github.com/a
VantWeapp：小程序UI开发利器
最新发布
2301_79395251的博客
11-26 519
摘要： VantWeapp是专为微信小程序的轻量级UI组件库，由有赞团队开源维护。其特点包括：轻量高效（按需引入）、样式可定制（CSS变量全局修改）、组件丰富（覆盖表单、反馈、业务场景）及TypeScript支持。安装通过npm，组件按需配置，使用类似Vue风格。支持主题定制，文档完善，提供示例和社区支持。适用于中小团队或个人开发者快速构建统一风格的小程序，注重开发效率与视觉一致性。 （注：实际输出严格控制在150字内，此处为示例，具体字数可微调。）
微信小程序引入Vant插件
℡メ㏑╭ァ小凯
02-27 1307
然后在终端执行获取Vant代码。安装完成后点击npm构建。使用正常按官网的使用即可。
Vant Weapp如何在微信小程序中使用
Dreamer_Ji的博客
10-17 2333
Vant Weapp在微信小程序中的使用方法 1.进入https://github.com/youzan/vant-weapp下载 2.打开vant-weapp文件夹，复制dist文件到微信小程序文件夹中，并且在app.json中引入所要使用的组件便可以进行使用，注意此路径是你存放dist文件夹，此处以按钮为例 3.在wxml文件夹中直接引用便可。 ...
小程序如何使用vant
DJxyyy的博客
10-28 639
小程序如何使用vant 使用 Vant Weapp 前我强烈的建议大家去看下微信官方的 小程序简易教程 和 自定义组件介绍 点击下方超链接 https://youzan.github.io/vant-weapp/#/quickstart 第一步 首先我们先创建一个项目 跟着打开终端，cd 到小程序目录中，然后键入以下命令 初始化项目： npm init 然后一直回车直到如下面的图片 然后输入yes 再按回车 这个时后我们的目录里多了一个package.json 文件： 第二步 接下来，正式安装
微信小程序引入vant-webapp的正确姿势
web_noob的博客
06-07 2395
1.打开微信开发者工具新建小程序项目 2.命令行到根目录，初始化npm 这里会让你填一些初始化信息，我这里做演示就什么都不填了，直接回车 3.npm 安装vant小程序专用包。 cmd中输入：npm i @vant/weapp -S --production安装vant/webapp小程序专用包。 4.去微信开发者工具里构建npm和使用npm 模块 进入微信开发者工具，依次点击左上角工具——>构建npm。右上角详情——>勾选使用npm模块。成功后你的项目文件夹会多出来这两
Vant Webapp步骤表单
qq_40286424的博客
02-24 2694
Vant webApp步骤表单 文章目录Vant webApp步骤表单一、前言二、预览三、代码1.shareApplication.js2.shareApplication.json3.shareApplication.wxml4.shareApplication.wxss 一、前言 Vant版本：1.10.2 官方地址：https://vant-contrib.gitee.io/vant-weapp/#/empty 微信小程序表单校验:https://www.cnblogs.com/zhangxiaoyo
微信小程序安装VantWeapp
weixin_53805188的博客
01-05 949
在安装以前必须先检查是否有node,在终端输入node -v即可查看，没有的话就先安装node我按照官方文档（）安装的时候，到最后构建npm发现提示/xxxxxxxxx/mytest/node_modules/@babel/runtime/index.js: 未找到npm包入口文件后来发现是缺少package.json文件，于是修改 project.config.json文件复原以后在终端执行如下命令，卸载安装的VantWeapp。
支付宝小程序组件库
08-09
支付宝小程序组件库
微信小程序-使用vant组件库
xiangxiongfly
09-25 7980
Vant Weapp 是有赞前端团队开源的小程序 UI 组件库，基于微信小程序的自定义组件开发，可用来快速搭建小程序项目。
在微信小程序中引入vant组件
m0_51699941的博客
08-25 1960
本文记录通过npm安装vant并在微信小程序开发中引入vant组件的详细步骤
小程序中使用vant
xixi的博客
01-04 298
1.npm 安装 npm i @vant/weapp -S --production 2.修改 app.json 将 app.json 中的 "style": "v2" 去除 3.修改 project.config.json { ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json",
vant在小程序中的使用
seimeii的博客
04-29 1177
1.van-field <van-cell-group> <div class="details"> <img :src="require('@/assets/img/alarm/dot.png')" alt="图片" /> <van-field disabled v-model.trim="alarmInfo.groupName" input-align="left"
【小程序使用vant Weapp组件库详细教程】
weixin_57957943的博客
03-21 1518
要说到小程序开发过程中用到的UI组件库，我第一个想到的就是vant，因为对于我来说，这个组件库里面的UI界面比较符合我的审美，颜值还不错，另外最重要的是，里面的功能比较齐全，项目之中要用到的一些需求，在这里都可以找到并且直接使用，就很nice了。使用npm i @vant/weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径（推荐，因为这个可以直接抄文档，不需要改变引入路径的~）进入项目的根目录底下，注意，一定要进入根目录哦，使用cd …
微信小程序中使用vant组件库（超详细）
热门推荐
阿浩的博客
01-17 3万+
Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。微信小程序版本的Vant组件库是Vant Weapp，其官方文档是我们废话不多说，直接进入主题，在微信小程序中使用Vant Weapp。
小程序中引入vant组件
m0_68895316的博客
07-26 757
npm引入vant
结构为webapp/miniprogram_npm/vant-weapp/lib
07-31
根据用户提供的信息，问题在于微信小程序中引入vant-weapp组件时路径错误。用户当前的结构是`webapp/miniprogram_npm/vant-weapp/lib`，而之前配置的路径是`@vant/weapp`，这可能导致路径不匹配。 解决方案： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值