开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >微信小程序引入Vant

微信小程序引入Vant

tianyawhl

发布于 2021-01-20 02:33:57

发布于 2021-01-20 02:33:57

4940

举报

文章被收录于专栏：前端之攻略前端之攻略

1、在新建的小程序目录下 npm init -y 生成package.json文
2、npm 安装vant npm i @vant/weapp -S --production
3、选择微信开发者工具下的构建 npm
4、选择详情中使用npm模块
5、使用在app.json或index.json中引入组件，详细介绍见快速上手 "usingComponents": { "van-button": "@vant/weapp/button/index" } 在页面中使用vant标签 <van-button type="primary">主要按钮</van-button>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

小程序使用组件库 vant-weapp详细教程

npm javascript 小程序 https 微信

要说到小程序开发过程中用到的UI组件库，我第一个想到的就是vant，因为对于我来说，这个组件库里面的UI界面比较符合我的审美，颜值还不错，另外最重要的是，里面的功能比较齐全，项目之中要用到的一些需求，在这里都可以找到并且直接使用，就很nice了。

王小婷

2020/10/23

1.6K0

小程序vant-weapp的日历组件的使用

npm 小程序微信 javascript https

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：https://github.com/youzan/vant-weapp 中文文档：https://vant-contrib.gitee.io/vant-weapp/#/intro

王小婷

2020/11/12

2.7K0

小程序vant-weapp的日历组件的使用

vant weapp 在小程序中的使用

移动端组件库腾讯技术创作特训营S11#重启人生 vant 工具

Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

万少

2025/02/08

4320

vant weapp 在小程序中的使用

小程序内引入使用vant组件操作教程详解

小程序 javascript 微信 npm 云开发

Vant是一套由有赞技术团队精心打造的轻量可靠的移动组件库，包含了按钮、弹层等基础组件，单选、复选、输入框、选择器、评分等表单组件，提示框、折叠面板、轮播图等交互组件还包括了地址编辑、地址列表、商品卡品、优惠券等电商常用模块，非常好用的一套组件库。

许坏

2020/03/26

4K0

小程序内引入使用vant组件操作教程详解

【愚公系列】2022年09月微信小程序-电商项目-UI框架的选型

小程序微信 git json

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

愚公搬代码

2022/09/27

3250

【愚公系列】2022年09月微信小程序-电商项目-UI框架的选型

微信小程序使用组件库

微信小程序组件库工具开发者配置

首先去vant官网: https://youzan.github.io/vant-weapp/#/quickstart 找到安装命令：通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn add @vant/weapp --production

世间万物皆对象

2024/03/20

2870

小程序动端组件库Vant Weapp的使用

Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用

王小婷

2019/01/03

2.2K0

微信小程序引入UI组件库

npm 小程序微信 https 网络安全

3、安装完成后，在微信开发者工具中的菜单栏：详情-----使用npm模块-----工具 ------ 构建 npm ：

江一铭

2022/06/16

9960

微信小程序mpvue+Vant Weapp初始化

vue.js javascript 微信小程序 node.js

运行成功之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。 Vue开发环境已经搭建好，接下来打开微信开发者工具,打开我们的项目my-project

青梅煮码

2023/02/18

3200

小程序vant-weapp-商品卡片列表

npm 小程序微信 javascript https

用过小程序的几个框架，最后还是选择了用vant-weapp，喜欢这款框架的原因，可能就是它里面的组件很多，很丰富，够用，在我的业务场景里面，大部分的需求都是可以在这个框架里面找到，不用自己大费周章的写代码，只需要去文档里面，拿到组件出来，稍微的修改一下样式，就可以完成自己的工作，这大概就是它吸引我的地方啦。

王小婷

2020/12/07

2.9K0

小程序vant-weapp-商品卡片列表

小程序开发中的插件生态与应用-下

插件开发组件库云函数小程序

在小程序的开发过程中，插件作为扩展功能、提升效率的重要工具，扮演着不可或缺的角色。它们不仅能够帮助开发者快速集成复杂的功能模块，还能优化开发流程，缩短项目周期。

小白的大数据之旅

2024/12/24

2290

使用原生开发高仿瑞幸小程序（一）：使用 Vant 组件库和配置多页面

json https javascript 网络安全小程序

为什么要跨平台，自然是为了节约成本。尤其是创业初期，需要快速迭代，快速试错。此时用原生技术，开发起来未免太过拖沓。我所想的是，如何能够快速的，最大化的覆盖屏幕数。首先，我们按照old school来分，我们可以分为移动端，web端和pc端。移动端的跨平台技术可以采用目前大热的flutter，这是由google推出的技术。而web端和pc端在Electron出现后，也变得简单了。我们可以用js来写pc端的应用。这就意味着，我们只需要两门技术就能覆盖所有端。

一只图雀

2020/05/21

2.2K1

小程序使用mpvue框架无缝接入Vant Weapp组件库

vue.js npm 小程序微信打包

有美团开源出的mpvue以其vue的语法和良好的开发效率再搭配上用户体验良好的UI组件无疑是定制化微信小程序的开发方式，然而由于mpvue是对微信原生开发的再次封装，这也为我们引入UI组件添加了不少麻烦，话不多说，接下来为大家展示引入vant-weapp的方法。 1、首先，我们需要有个mpvue的基础的项目文件骨架，即用mpvue初始化一个项目

李维亮

2021/07/08

9660

小程序云开发全套实战教程（最全）

api 小程序微信

在学习云开发的时候将自己的学习过程记录下来了，放在了网上，收获了一波好评，今天下午在办公室没有事情，也发现之前有人在博客里面评论，你这个教程还有一半哩，可能是csdn的自动搬运功能出来一点小问题，没有搬运成功吧，这里就手动复制粘贴成为一篇了，篇幅比较长，如果有不足或者不注意写错的地方，欢迎大家提出纠正哦。

王小婷

2019/01/28

16.3K2

微信小程序日期选择器显示当前系统年月日时分

javascript npm 微信 https 网络安全

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：https://github.com/youzan/vant-weapp 中文文档：https://youzan.github.io/vant-weapp/#/intro

王小婷

2021/06/29

3.3K0

小程序中使用npm安装vant组件实现按需引入，减少代码包大小和避免触发用户隐私协议

vue.js 小程序 vant

正常项目中我们可能都会选择 npm 的方式，但是这种方式 vant 和小程序并不支持像我们一般的前端项目中的按需引入，小程序开发工具构建 npm 时会把整个 vant 的组件编译到 miniprogram_npm 目录中，即使我们在项目中没有通过 usingComponents 申明引用的组件也会被打包进代码包中。

人人都是码农

2024/05/28

4950

小程序中使用npm安装vant组件实现按需引入，减少代码包大小和避免触发用户隐私协议

mpvue搭配iView开发小程序

将iview-weapp中的dist文件夹(此处我重命名为iview,以便区分)复制到mpvue项目的输出目录中(默认是dist，编译后的vue代码在此)

一个淡定的打工菜鸟

2018/12/07

2.4K0

微信小程序引入VantWeapp开发

第二种方法使用npm配置(不推荐) 因为npm下载的组件没有直接从git上拉取的多，如果组件要求不多，当我没说在项目终端执行下面命令

明知山

2020/09/03

9250

微信小程序－vant-weapp日期选择器的使用（年月日时分）

npm 小程序微信 javascript github

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：https://github.com/youzan/vant-weapp 中文文档：https://youzan.github.io/vant-weapp/#/intro

王小婷

2021/06/22

7.5K1

微信小程序－vant-weapp日期选择器的使用（年月日时分）

撸一个 webpack 插件，希望对大家有所帮助

网站 https 网络安全 webpack 打包

最近，陆陆续续搞了一个 UniUsingComponentsWebpackPlugin 插件(下面介绍)，这是自己第三个开源项目，希望大家一起来维护，一起 star 呀，其它两个：

前端小智@大迁世界

2022/06/15

3420

相关推荐

小程序使用组件库 vant-weapp详细教程

更多 >

LV.1

这个人很懒，什么都没有留下～

作者相关精选

换一批

加入讨论

的问答专区 >

1程序员擅长1个领域

相关课程

一站式学习中心 >

腾讯云开发玩转小程序实战训练营

云开发 CloudBase

微信公众号在线学习平台搭建实践_《硅谷课堂》

微信小程序学习路径课

云开发 CloudBase

小程序·云开发

微信小程序