走进小程序【八】微信小程序中使用【Vant组件库】

提醒：Element UI 不支持 微信小程序，所以使用vant。但是这个node_modules不能支持使用，需要要构建一下！构建的配置：（默认）

可以查看Vant组件库的介绍进行参考。

在微信小程序开发中，UI 界面的美观和功能的完备对用户体验至关重要。Vant Weapp 是由有赞团队开源的一款轻量、可靠的小程序 UI 组件库，提供了丰富的组件，帮助开发者快速构建小程序。本篇博客将详细介绍如何在微信小程序中使用 Vant 组件库，并解决初学者常见的问题。Vant Weapp 是 Vant 在小程序端的实现，提供了丰富的基础和高级组件，如按钮、弹出层、列表等，旨在让开发者以更少的代码实现更丰富的功能。官方网站Vant Weapp。

Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。微信小程序版本的Vant组件库是Vant Weapp，其官方文档是我们废话不多说，直接进入主题，在微信小程序中使用Vant Weapp。

Vant是一款基于Vue的高质量移动端组件库，专为微信小程序打造，提供丰富、简洁、易用的UI组件，助力开发者快速搭建美观、功能完善的微信小程序界面，提升开发效率与用户体验。

微信小程序中使用VantWeapp组件库 官方快速上手文档 1.新建项目 2.初始化项目 普通项目 如果不是云开发的项目：那么直接在根目录下执行命令： npm init 一路回车(如果需要自己配置项目基本信息也可以)。在根目录下就会生成一个package.json文件。 云开发项目 在miniprogram文件夹下执行初始化命令。 3.安装组件库 执行命令： npm i @vant/weapp -S --production 4.配置组件库 在详情—本地设置中勾选使用npm模块。 在工具栏中选择工具—

本文记录通过npm安装vant并在微信小程序开发中引入vant组件的详细步骤

vant Wwapp 小程序开发组件库官网。安装 Vant 组件库 1.在微信小程序项目文件目录的空白位置右键，选择在外部终端窗口中打开 2在命令行输入如下命令（在项目中创建包管理配置文件package.json）

（一）悬浮浮动（二）底部跳转（三）上传组件：实现图片/文件上传预览、删除、点击之后列表查看1、js代码（1）替换了借助的是微信小程序开发工具的缓存路径的代码部分2、页面代码（四）图片预览1、使用vant组件：van-image（1）js代码（2）html代码2、使用image。

Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。Vant框架是一个用来做移动端开发的框架。详情请点击vant官网。

在需要的页面的 .js 文件中可以直接使用 Vant 提供的 JavaScript API，例如弹窗、数据处理等。