微信公众号开发

微信小程序中使用vant 组件 详细构建项目

本文主要是介绍微信小程序中使用vant 组件 详细构建项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、创建项目

使用微信开发者工具创建小程序项目
在这里插入图片描述

二、初始化npm

在这里插入图片描述
在此目录下打开命令行工具，输入npm 命令，然后一路回车，会发现目录下多了一个 package.json文件

npm init

在这里插入图片描述

三、引入vant微信小程序包

1.npm安装 vant 包

# 通过 npm 安装
npm i @vant/weapp -S --production

在这里插入图片描述
安装好之后，会在微信开发工具的 资源管理器中看到 node_modules 文件夹
在这里插入图片描述

2.修改 app.json

将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
在这里插入图片描述

3.构建微信 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。
在这里插入图片描述
在这里插入图片描述
构建完成 npm之后， 可以看到微信小程序构建的npm包
在这里插入图片描述

四、开始使用vant 组件

在想要使用vant组件的页面的目录照 .json文件，引入所需要的组件，这里时单个页面引入了单个组件
index.json
在这里插入图片描述
index.wxml
在这里插入图片描述
效果图
在这里插入图片描述
具体个各个组件使用参考vant 官网
vant 小程序组件库

在这里插入图片描述

这篇关于微信小程序中使用vant 组件 详细构建项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航