06 vant组件库的使用

最新推荐文章于 2023-06-28 17:08:51 发布
最新推荐文章于 2023-06-28 17:08:51 发布
阅读量340 收藏
点赞数
分类专栏： 10小时零基础入门微信小程序开发 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuyuan123456/article/details/125270471
版权
本文详细介绍了 vantWeapp 组件库在小程序中的使用流程：从初始化 package.json，下载 vant 组件库，解压并保存到本地，创建 lib 文件夹存放组件库，到在 app.json 中配置引用路径，最后在页面中使用 vant 组件如 van-button 的示例。
摘要由CSDN通过智能技术生成

06 vant组件库的使用

首先，初始化一个package.json

npm init -y

然后打开vant Weapp官网
在这里插入图片描述

输入以下的命令，将这个库下载下来

npm i @vant/weapp -S --production

然后将这个库一层一层的打开
第一层
在这里插入图片描述
第二层
在这里插入图片描述

第三层
在这里插入图片描述

第四层
在这里插入图片描述
我们需要的就是这层，把这个dist文件夹我们复制保存到本地，为它重命名为vant
然后新建一个名字为lib的文件夹，将这个vant组件库放进去
在这里插入图片描述
然后，我们就可以使用它了

首先打开app.json
在这里插入图片描述
将下面的代码敲进去就行

 "usingComponents": {
    "van-button": "/lib/vant/button/index",
    "van-card": "lib/vant/card/index",
    "van-submit-bar": "lib/vant/submit-bar/index"
  },

然后我们就可以在页面上使用组件了

<van-button type="danger">危险按钮</van-button>
JSONP＄
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何使用vant组件库
weixin_48952990的博客
06-17 241
vant组件库
vant组件库使用步骤
最新发布
z1815367894的博客
07-03 223
按需导入组件(推荐) 首先安装插件 : cnpm i babel-plugin-import --save 在根目录的babel.config.js文件中添加plugins字段 module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ ['import', {
Vant 组件库的使用
m0_61918167的博客
04-29 1222
快速使用vant组件
vant组件库的使用 - - - vue2篇&小程序篇
sywdebug的博客
12-07 9256
在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可。点击上方导航栏 - - - 工具 - - - 构建 npm。然后右上角 - - - 详情里的使用 npm 模块勾上。在 main.js 文件中添加上。在其他 vue 文件可以直接使用。在其他 vue 文件可以直接使用。然后在 wxml 里就可以使用了。在 app.json 文件加入。然后在 wxml 直接使用即可。直接在 vue 文件里添加。在 main.js 中添加。然后就可以引入组件了。
Vue之Vant移动端组件库使用方法
HanXiaoXi_yeal的博客
05-18 324
步骤： 全局安装 npm i vant -S 在mian.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 根据实际情况引入组件 <template> <div> <van-cell title="选择多个日期" :value="text" @click="show = true" /> <van-calendar v-model="show"
Mpvue中使用Vant Weapp组件库的方法步骤
10-16
在需要使用Vant组件的页面目录下的 `main.json` 文件中，引入对应的组件，例如引入Button组件： ```json { "usingComponents": { "van-button": "/static/vant/button/index" } } ``` 3. **使用组件**： ...
详解如何搭建mpvue框架搭配vant组件库的小程序项目
01-03
Vant – 轻量、可靠的移动端 Vue 小程序 组件库。由 有赞 公司开发与维护。提供了一系列美观、优质的移动端组件。vant 官网 2. 在普通小程序怎么使用 vant 组件 使用之前 使用 Vant Weapp 前，请确保你已经学习过...
Vant移动端组件库-其他
06-11
Vant 是一套轻量、可靠的移动端组件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。特性：1、60+ 高质量组件2、95% 单元测试覆盖率3、完善的中英文文档和示例4、支持按需引入5、支持主题定制6、支持...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
Vant Aliapp是移动端Vue组件库的支付宝小程序版本，两者基于相同的视觉规范，提供一致的API接口，助力开发者快速构建小程序应用。 Vant Aliapp通过小程序转换器基于转换得到，并进行了少量的兼容适配调整。 预览 ...
小程序使用vant组件库；构建npm，附源码
06-29
在本文中，我们将深入探讨如何在小程序中使用Vant组件库，以及如何构建npm环境来管理小程序项目。Vant是一个轻量级、高度定制化的移动端UI组件库，它源自于滴滴出行的WeUI，并且针对Vue.js进行了优化，使得开发者...
Vant Weapp.zip
10-23
Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，高端大气上档次！(资源内含使用说明.) Vant Weapp官网： https://youzan.github.io/vant-weapp
小程序—vant组件库的使用
露露
02-06 837
（1）生成package.json。作用：对当前项目的 配置信息以及依赖包的管理都会在这个里面进行配置。 （2）安装vant 组件库 npm i @vant/weapp -S --production ( 3 )构建npm包 打开微信开发者工具，点击工具 -> 构建 npm，并勾选使用 npm 模块选项，构建完成后，即可引入组件 (4)项目中进行使用 ...
Vue Vant组件库使用
奋斗到天明~
11-19 1339
vant组件使用 先回忆vue安装脚手架步骤： npm install vue-cli -g vue init webpack vant安装 简写形式：npm i vant -S 完整形式：npm install vant -save 注意：如果网速慢的情况下可以使用淘宝镜像安装，不建议使用cnpm 命令行：npm install vant --save --registry=https://...
用一用Vant组件库
张浔CSDN
04-29 1929
目录一、Vant是什么？二、小案例2.1 准备工作2.2 功能实现三、总结 本篇文章主要讲述如何在Vue2中使用Vant2组件库，面向会Vue基础初次使用Vant组件库的对象，大概阅读时间5分钟 一、Vant是什么？ 先去官网看一看是怎么介绍的…… 再找一找，有什么特性？ 从官网中的介绍发现这个组件库主要是用来开发移动端的，提供的版本也都是主流的，其中轻量和性能极佳非常的吸引眼球，真的是这样吗？一会体验一波，在介绍的特性里面发现使用的是TypeScript编写的，曾看过一篇文章介绍TypeScrip
vant库 简单使用
Allen的博客
10-15 300
运用vant组件库添加链接描述 1.安装npm i babel-plugin-import -D 或 yarn add babel-plugin-import -D 2. 配置项更改，别忘了重新启动项目 没事多看看官网，它不香么，做个人吧
手把手教你如何使用Vant组件
Orange71234的博客
06-28 1695
推荐使用（详见官网点击左侧快速上手，不推荐在企业生产环境中使用免费 CDN。在图形化界面中，点击依赖->安装依赖，然后将vant添加到依赖中即可。
vant 基本使用
Luzhangfeng的博客
05-05 1874
vant 库的基本使用 vant 库是一款配合 Vue 使用的移动端 UI 组件库，轻量、高效。 项目本地安装 vant $ npm install vant -S 在 main.js 文件中引入 vant 库核心模块与它的样式 import Vue from 'vue' import Vant from 'vant' import 'vant/lib/index.css' Vu...
vant Grid组件图片加载问题 无法加载本地图片解决方案
m0_62876802的博客
07-22 1464
我们引入图片直接用官网给的icon来加载案图片。然后我们图片地址得用require包一下。
小程序开发使用vant库，步骤分步详解，初次使用简单易懂
weixin_43968782的博客
10-09 4427
微信小程序开发使用vant框架，内容分步讲解，简单易懂，刚开始使用小程序开发，简单易懂
vue中，vant组件库使用技巧
05-19
下面是几个使用 Vant 组件库的技巧： 1. 按需引入：Vant 组件库支持按需引入，可以在项目中只引入需要的组件，减少打包体积和加载时间。使用方式类似于 ElementUI，可以通过 babel-plugin-import 插件来实现。 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值