如何在小程序中引入使用vant框架

原创 已于 2023-09-06 15:31:45 修改 · 1w 阅读 · 23 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

于 2023-07-01 22:02:02 首次发布
本文介绍了如何在微信小程序中引入并使用Vant框架。首先， vantUI是移动端UI组件库，适合小程序开发。接着，详细步骤包括：初始化项目，安装依赖，修改app.json去除'style': 'v2'，调整project.config.json确保npm包能被找到，最后在微信开发者工具中构建npm并启用npm模块。通过这些步骤，开发者可以成功引入Vant组件，如Button。

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

一、vant框架

vantUI框架常用于移动端页面组件的基础库构建，为了让用户获得更趋向于原生的体验，它是一种相当不错的方案选择。

关于这个框架，它不仅有适用于移动端vue脚手架的版本，同时还存在可以兼容小程序开发的webapp版本。在微信小程序的原生组件较少的背景下，通常我们在开发微信小程序的时候则往往会使用该框架作为主体的UI框架进行开发，省时省力，大大缩短了开发的周期。

由于小程序的环境和普通的Vue项目大不相同，所以想要在小程序中引入vant框架并不能直接用npm去直接构建，它稍微会更麻烦些，所以接下来的内容会详细介绍一下如何在微信小程序中引入使用Vant。

二、通过包的方式引入Vant并使用

①.打开我们小程序的项目目录，然后打开文件所在的位置。

在这里插入图片描述
②打开命令行窗口，输入npm init构建package文件，通过该配置文件管理插件包。
在这里插入图片描述

③接下来安装依赖，跟vue项目的方式一样。

npm i @vant/weapp -S --production

最低0.47元/天 解锁文章

200万优质内容无限畅学
微信小程序引入Vant插件
℡メ㏑╭ァ小凯
02-27 1186
然后在终端执行获取Vant代码。安装完成后点击npm构建。使用正常按官网的使用即可。
在微信小程序中安装和使用vant框架
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
06-11 3051
详细介绍了如何在微信小程序中安装并使用vant组件
在微信小程序中引入vant组件
m0_51699941的博客
08-25 1885
本文记录通过npm安装vant并在微信小程序开发中引入vant组件的详细步骤
微信小程序首页与分类功能实现及Vant组件应用
最新发布
weixin_42466723的博客
06-01 629
微信小程序，作为一种新型的移动应用形式，它具备了无需下载安装即可使用的特性，与普通应用相比，拥有即开即用、触手可及的便捷优势。小程序通过微信内部的搜索、扫码等途径轻松触达用户，极大地降低了用户获取应用的成本，同时赋予了开发者和企业一种全新的触达用户的渠道。开发微信小程序的首要目标是实现快速开发、上线和迭代，以便快速响应市场和技术的变化。其次，目标是提高用户体验，无论是流畅度还是易用性，都要力求做到极致。此外，还要注重小程序的业务目标，例如增加销售、提升品牌知名度或者优化顾客服务。
小程序--引入vant组件库
sinat_34896766的博客
02-21 1338
小程序中凡是通过 npm 下载的模块，都必须经过构建才能使用，构建后的内容会存放在。在微信开发者工具中打开终端，输入npm init，对npm进行初始化。修改project.config.json中的。，否则 Vant 组件的样式会受到影响。
微信小程序引入vant组件
qq_54387947的博客
07-11 387
4、点击工具 --> 构建npm 生成 --> miniprogram_npm文件夹。3、修改项目文件project.config.json 修改下面代码。1、在已有的微信小程序项目的终端下输入。终端会生成package.json。会生成一个node_modules。
小程序引入vant组件（已解决）
01-03
写在之前：首先要看小程序是否有package.json文件，有的话可以往下走，没有的话，需要先执行npm init写入package.json文件 第一步：npm i vant-weapp -S --production ，接着点击工具的构建npm 第二步： 我找到方法...
详解如何在微信小程序开发中正确的使用vant ui组件
10-18
总结一下，要在微信小程序开发中使用Vant Weapp组件，需要执行以下步骤： 1. 确保你的微信开发者工具为最新版本。 2. 在小程序项目的根目录下执行`npm install vant-weapp --production`。 3. 点击微信开发者工具中...
微信小程序引入Vant组件库过程解析
11-30
引用 Vant 组件库后，你需要在小程序的页面配置文件（如 `index.json`）中引入所需组件，然后在对应的页面的 `wxml` 和 `wxss` 文件中使用它们。例如，如果你想要使用 Button 按钮组件，你需要在 `json` 文件中引入...
微信小程序怎么引入vant
sslcsq的博客
04-27 1153
首先在你小程序的目录下打开终端 然后初始化一个package.json文件 输入：npm init 或者 npm install cnpm都一样 然后一路回车 看小程序项目就回产生一个package.json文件： 接着在vant组件库的官网上找到安装语句：npm i vant-weapp -S --production，在终端输入安装命令（还是那个终端） 这是基于小程序的vant库官网： ht...
【微信小程序——01】微信小程序引入vant保姆级教程，创建微信小程序教程全程保姆级讲解，微信小程序创建vant项目，小程序vant全局引入
qq_51055690的博客
06-09 7846
小程序引入vant，如何引入vant，快速引入vant，引入vant教程，小程序引入vant
微信小程序引入VANT组件的方法步骤
12-13
1.右键项目名称->在终端中打开 2.在终端输入 npm init 用来初始化，然后一直回车默认就Ok。 之后项目中会出现 project.config.json 内容为当前项目的配置信息以及依赖包的管理。 3.安装vant依赖包(在终端输入) npm i vant-weapp -S --production 4.进入小程序开发工具，选择左上角 工具->构建npm 完成之后项目里会多出依赖包 5.点击右上角详情并勾选使用npm模块。 6.选择要在哪个pages里使用该组件 这里以pages下的movie举例，写一个简单的按钮。 如图 在对应的json文件中
微信小程序引入 vant组件（详细步骤）
蓝胖子的博客
12-21 1189
微信小程序引入 vant组件（详细步骤）
微信小程序vant全局引入使用
weixin_40723487的博客
09-25 1648
以 Button 组件为例，只需要在 app.json 或 index.json 中配置 Button 对应的路径即可所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp请将路径修改为项目中 @vant/weapp 所在的目录。构建成功之后，可以把node_modules删除，小程序只需要miniprogram,每一个需要npm i 引入的东西都可以把node_modules删除，但是一定要构建npm。把刚刚的代码，粘贴到文件里面，
微信小程序引入Vant组件库
weixin_30919919的博客
08-02 198
前期准备 Vant Weapp组件库：https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端： 然后初始化一个package.json文件：输入命令：npm init 然后一路回车默认的即可： npm init 项目就回产生一个package.json文件： { ...
微信小程序引入vant组件库
m0_67752167的博客
12-02 260
2.安装组件库后需要构建npm库，（微信小程序最新版没有使用npm模块）3.然后删掉app.json里面的样式v2，避免造成冲突。1.现在微信小程序目录初始化 pack.json。4.最后一步在app.json加入。命令 npm init -y。重启小程序就可以正常使用。
微信小程序中引入vant组件
讨口子
03-10 802
通过npm引入 步骤一：进入小程序文件目录下cmd，运行命令npm install 若出现类似no such file or directory，open，则需要先运行npm init，再运行npm install 步骤二：打开微信开发者工具-详情-本地设置-勾选"使用npm模块" 步骤三：点击 工具-构建npm 说明：步骤一二三属于搭建微信小程序npm环境 步骤四：命...
【微信小程序】vant引入
gardenia的博客
08-17 833
上篇分享了微信小程序项目的创建，这篇分享vant组件的引入。小程序对 npm 的支持与限制目前小程序已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，小程序中使用 npm 包有如下3个限制：①不支持依赖于的包②不支持依赖于的包③不支持依赖于的包。...
微信小程序开发引入vant框架（步骤详细，供学习的同学们参考）
热门推荐
qq_39236157的博客
08-05 1万+
微信小程序开发引入vant组件
如何在微信小程序中使用Vant框架实现轮播图功能？
12-14
在微信小程序中使用Vant框架实现轮播图功能，你可以按照以下步骤操作： 1. **引入Vant组件库**： 首先，在你的项目的`index.js`文件中，通过`import`引入Vant库，特别是` vant-swipe`组件，它是用于轮播图的基本组件。 ```javascript import Vue from 'vue'; import Vant from 'vant'; Vue.use(Vant); ``` 2. **安装依赖**： 如果你还没有安装，可以在`npm install`或`yarn add`中添加`vant-swipe`依赖。 3. **创建轮播图组件**： 创建一个新的WXML文件，如`my-slideshow.wxml`，并编写基本的Vant `swipe`组件结构。 ```wxml <view class="container"> <van-swipe :autoplay="true" indicator-dots> <van-swipe-item wx:for="{{items}}" :key="item.id"> <image src="{{item.image}}" /> </van-swipe-item> </van-swipe> </view> ``` 4. **设置数据和事件处理**： 在对应的WXML组件的JS部分（例如`my-slideshow.js`），初始化轮播图的数据，并处理切换事件。 ```javascript Page({ data: { items: [ { id: 0, image: 'path/to/image1.jpg' }, { id: 1, image: 'path/to/image2.jpg' }, // 添加更多图片... ], currentIndicatorDot: 0, }, methods: { switchItem(index) { this.setData({ currentIndicatorDot: index }); } } }) ``` 5. **样式调整**： 根据需要自定义轮播图的样式，可以通过`.van-swipe`、`.van-swipe-item`等类来定制。 6. **在页面中使用**： 将这个轮播图组件添加到你需要它出现的地方，比如在`app.json`或某个`wxml`文件中引用该组件。 完成上述步骤后，你就可以在微信小程序中看到Vant框架实现的轮播图了。记得在实际项目中替换`items`数组中的图片路径和其他属性。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值