Loading [MathJax]/jax/input/TeX/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

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

微信小程序引入Vant

tianyawhl

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

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

4790

举报

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

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官网: https://youzan.github.io/vant-weapp/#/quickstart 找到安装命令：通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn add @vant/weapp --production

世间万物皆对象

2024/03/20

2430

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

npm javascript 小程序 https 微信

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

王小婷

2020/10/23

1.5K0

vant weapp 在小程序中的使用

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

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

万少

2025/02/08

1930

vant weapp 在小程序中的使用

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

npm 小程序微信 javascript https

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

王小婷

2020/12/07

2.6K0

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

小程序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日期选择器的使用（年月日时分）

npm 小程序微信 javascript github

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

王小婷

2021/06/22

6.6K1

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

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

小程序微信 git json

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

愚公搬代码

2022/09/27

3160

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

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

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

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

青梅煮码

2023/02/18

3110

微信小程序电影模板

微信小程序 ICP备案 https

Vant Weapp UI库使用Vant Weapp 地址： https://youzan.github.io/vant-weapp

达达前端

2019/08/08

4.6K0

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

javascript npm 微信 https 网络安全

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

王小婷

2021/06/29

3.2K0

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

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

王小婷

2019/01/03

2.1K0

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

小程序 javascript 微信 npm 云开发

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

许坏

2020/03/26

3.8K0

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

微信小程序引入VantWeapp开发

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

明知山

2020/09/03

9040

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

json https javascript 网络安全小程序

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

一只图雀

2020/05/21

2.2K0

小程序 — wepy中使用有赞的vant-weapp组件

说下在wepy框架中如何使用开源组件，以有赞的vant组件为例，学会了这个其它的开源组件引入使用方式都一个道理。 1、安装 $ cnpm i vant-weapp -S --production

Ewall

2018/11/07

2.8K0

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

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

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

小白的大数据之旅

2024/12/24

1540

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

vue.js npm 小程序微信打包

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

李维亮

2021/07/08

9300

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

vue.js 小程序 vant

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

人人都是码农

2024/05/28

4480

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

小程序｜炎炎夏日、清爽一夏、头像大换装

小程序微信容器

炎炎的夏日一起来为头像增加点夏天的元素，让清爽的头像陪伴你一整个夏天。通过一个完整的小程序串通整个开发生命周期。

前端小鑫同学

2022/12/26

1K0

小程序｜炎炎夏日、清爽一夏、头像大换装

微信小程序开发(一)

微信小程序

其实微信开发开发文档中已经有配置说明自定义tabBar。直接在app.json中的tabBar项中指定即可：

Jimmy_is_jimmy

2022/03/10

2.9K0

相关推荐

微信小程序使用组件库

更多 >

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验