【Vant相关知识】

news2024/11/17 17:22:39

目录

1 什么是Vant

2 Vant的优势

3 Vant特性

4 第一个Vant程序

4.1 创建Vue项目

4.2 安装Vant支持

4.3 添加Vant引用

5 按钮组件

6 表单页面

7 area省市区选择

8 商品列表

1 什么是Vant

 

 

Vant是一个轻量，可靠的移动端组件库，2017开源

目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2F3lang3%2Freact-vant)和[支付宝小程序版本](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fant-move%2FVant-Aliapp)。

本文中我们使用Vue2版本对应的Vant学习

[https://youzan.github.io/vant/v2/#/zh-CN/]

2 Vant的优势

ElementUI是开发计算机浏览器(非移动端)页面的组件库

而Vant是开发移动端页面的组件库

我们设计项目使用手机\\移动设备访问的,所以使用Vant更合适

3 Vant特性

  • 🚀性能极佳，组件平均体积小于 1KB（min+gzip）
  • 🚀 65+ 个高质量组件，覆盖移动端主流场景
  • 💪 使用 TypeScript 编写，提供完整的类型定义
  • 💪 单元测试覆盖率超过 90%，提供稳定性保障
  • 📖 提供完善的中英文文档和组件示例
  • .......

4 第一个Vant程序

4.1 创建Vue项目

【VUE Cli脚手架软件安装篇】_居然天上楼的博客-CSDN博客_vue的workspace在哪里

4.2 安装Vant支持

我们创建的Vue项目并不会默认就支持Vant

所以,我们需要安装Vant的支持到Vue项目中

在打开的idea界面最下方,找到Terminal点击

在出现的命令行中输入安装Vant的指令

运行安装Vant的npm命令:(-S的S是大写的!!!!!!!)

E:\\vue-home\\demo-vant>npm i vant@latest-v2 -S

安装结束后可能有警告,可以忽略

最终可能看到下面的结果

到此为止,我们就将Vant运行需要的文件安装在vue项目中了

vant2网站:

Vant 2 - Mobile UI Components built on Vue

4.3 添加Vant引用

如果想要在项目中使用Vant提供的组件

需要在Vue项目代码中添加Vant的引用

Vue项目的src/main.js文件中,添加引用代码如下

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

添加了上面的引用,当前Vue项目就可以使用Vant组件了

为了实时运行项目,我们先启动Vue项目,测试表示它正常运行

可以在idea提供的Terminal界面中编写如下代码

E:\\vue-home\\demo-vant>npm run serve

打开浏览器

输入localhost:8080

进入移动端页面调试模式

以Google浏览器为例按F12进入调试模式后点击移动端调试即可

 

5 按钮组件

所有组件的演示代码,都可以从官网获取

Vant 2 - Mobile UI Components built on Vue

在HomeView.vue文件中修改代码如下

<template>
  <div class="home">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

打开页面就能看到按钮的样式了

看到这个内容,表示当前Vant组件工作正常

如果没有看到效果

检查Vant组件的安装和引用

6 表单页面

登录作为移动端非常常见的界面

Vant表单是直接提供模板的,我们可以在官网找到表单链接直接使用

在AboutView.vue文件中编写代码如下

  <div class="about">
    <!--
    @submit是vant组件提供的Event(事件),在表单提交并验证成功时触发,会指定要运行的js方法名称
    @failed是vant组件提供的Event(事件),在表单提交并验证失败时触发,会指定要运行的js方法名称
    以后如果遇到其他情况,想要了解更多,需要查阅官方提供的Api文档
    -->
    <van-form @submit="onSubmit" @failed="onFailed">
      <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    onFailed(errorInfo){
      // 这个方法会在用户名或密码为空时运行
      // errorInfo参数有两个属性,errorInfo.values是提交的内容,errorInfo.errors是错误的原因
      console.log("表单验证未通过,提交失败");
      console.log("提交的信息为:");
      console.log(errorInfo.values);
      console.log("错误的原因:")
      console.log(errorInfo.errors);

    }
  },
};
</script>

注意@submit和@failed这两个事件的绑定关系

vant网站打不开的试试这个路径:

Vant 2 - Mobile UI Components built on Vue

7 area省市区选择

先在views文件夹下创建AreaView.vue文件

编写代码如下

<template>
  <div>
    <van-area title="标题" :area-list="areaList" />
  </div>
</template>

<script>
const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    // ....
  },
};
export default{
  data(){
    return {areaList};
  }
}


</script>

定义路由设置

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/area',
    name: 'area',
    component: () => import('../views/AreaView.vue')
  }
]

通过输入路径http://localhost:8080/area

访问省市区选择页面

但是只有少量数据

如果想要真实的数据,那么就需要在上面areaList数据中填入大量数据

但是这个工作量很大,个人实现非常困难,所以可以使用业界通用的一个省市区信息json对象

先安装全国省市区数据包

idea的Terminal界面输入如下命令

E:\\vue-home\\demo-vant>npm i @vant/area-data

如果有警告,直接无视

安装结果可能为

added 1 package in 2s

如果该安装成功,就可以添加全国省市区数据到项目中了

AreaView.vue代码中添加如下

<template>
  <div>
    <van-area title="标题" :area-list="areaList" @confirm="showArea" />
  </div>
</template>

<script>
// const areaList = {
//   province_list: {
//     110000: '北京市',
//     120000: '天津市',
//   },
//   city_list: {
//     110100: '北京市',
//     120100: '天津市',
//   },
//   county_list: {
//     110101: '东城区',
//     110102: '西城区',
//     // ....
//   },
// };

// 从下载好的全国省市区数据包中提取数据对象,名称为areaList
import {areaList} from '@vant/area-data'

export default{
  data(){
    return {areaList};
  },
  methods:{
    showArea(area){
      console.log(area);
    }
  }
}
</script>

上面代码不但实现了全国的省市区选择也支持了用户在确认时,将信息输出的功能

8 商品列表

移动端Vant直接支持了商品列表的格式

我们也不需要大范围的修改

创建ListView.vue

代码如下

<template>
  <div>
    <van-row>
      <van-col span="6">综合</van-col>
      <van-col span="6">销量</van-col>
      <van-col span="6">价格</van-col>
      <van-col span="6">筛选</van-col>
    </van-row>

    <van-card
        num="2"
        price="205.5"
        desc="非常好用的鼠标"
        title="无线激光鼠标"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag type="danger">自营</van-tag>
         
        <van-tag plain type="danger">酷鲨物流</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">加入购物车</van-button>
        <van-button size="mini">立即购买</van-button>
      </template>
    </van-card>

    <van-card
        num="2"
        price="205.5"
        desc="非常好用的鼠标"
        title="无线激光鼠标"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag type="danger">自营</van-tag>
         
        <van-tag plain type="danger">酷鲨物流</van-tag>
      </template>
      <template #footer>
        <van-button size="mini">加入购物车</van-button>
        <van-button size="mini">立即购买</van-button>
      </template>
    </van-card>
  </div>
</template>

<script>

</script>

个人主页：居然天上楼

感谢你这么可爱帅气还这么热爱学习~~

人生海海，山山而川

你的点赞👍 收藏⭐ 留言📝 加关注✅

是对我最大的支持与鞭策

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/111530.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

〖产品思维训练白宝书 - 产品思维认知篇④〗- 产品思维的核心要素

〖产品思维训练白宝书 - 产品思维认知篇④〗- 产品思维的核心要素

大家好&#xff0c;我是 哈士奇 &#xff0c;一位工作了十年的"技术混子"&#xff0c; 致力于为开发者赋能的UP主, 目前正在运营着 TFS_CLUB社区。 &#x1f4ac; 人生格言&#xff1a;优于别人,并不高贵,真正的高贵应该是优于过去的自己。&#x1f4ac; &#x1f4e…
阅读更多...
Word控件Spire.Doc 【评论】教程(1)：在 C#、VB.NET 中插入 Word 注释

Word控件Spire.Doc 【评论】教程(1)：在 C#、VB.NET 中插入 Word 注释

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…
阅读更多...
Web入门开发【二】- 网站设计

Web入门开发【二】- 网站设计

欢迎来到霍大侠的小院&#xff0c;我们来学习Web入门开发的系列课程。 首先我们来了解下这个课程能学到什么&#xff1f; 1、你将可以掌握Web网站的开发全过程。 2、了解基础的HTML&#xff0c;CSS&#xff0c;JavaScript语言。 3、开发自己的第一个网站。 4、认识很多对编…
阅读更多...
06---SpringBoot整合MybatisPlus 实现增删改查和分页

06---SpringBoot整合MybatisPlus 实现增删改查和分页

1、Mybatis-plus简介 为什么要用MP&#xff1f; MyBatisPlus可以节省我们大量工作时间&#xff0c;所有的CRUD代码都可以自动化完成偷懒用的~如果是对sql语言不太熟练的建议先用mybatis&#xff0c;熟练后再用mybatis-plus 简述 官网https://baomidou.com/为简化开发而生My…
阅读更多...
【并发】深入理解JMM并发三大特性（一）

【并发】深入理解JMM并发三大特性（一）

【并发】深入理解JMM&并发三大特性&#xff08;一&#xff09; 今天是2022.11.16&#xff0c;在此之前我已经学习完了图灵课堂MySQL的课程&#xff0c;也是想这篇文章一样用CSDN博客的形式来记录这些知识点。 在并发中&#xff0c;JMM在大多数人眼中&#xff0c;它是整个…
阅读更多...
Zookeeper 2 Zookeeper 安装与配置 2.1 Zookeeper 安装与配置

Zookeeper 2 Zookeeper 安装与配置 2.1 Zookeeper 安装与配置

Zookeeper 【黑马程序员Zookeeper视频教程&#xff0c;快速入门zookeeper技术】 文章目录Zookeeper2 Zookeeper 安装与配置2.1 Zookeeper 安装与配置2.1.1 Zookeeper 下载安装2 Zookeeper 安装与配置 2.1 Zookeeper 安装与配置 2.1.1 Zookeeper 下载安装 【其实这块内容 学…
阅读更多...
搜狗趁势而来，输入法江湖风云再起

搜狗趁势而来，输入法江湖风云再起

在2022腾讯数字生态大会上&#xff0c;搜狗输入法正式推出面向B端的开放平台&#xff0c;这是自去年9月完成退市、并入腾讯以来&#xff0c;这家输入法C端王者第一个大动作&#xff0c;宣告着其进军B端的野心。几乎与此同时&#xff0c;如今已是自家兄弟的微信&#xff0c;悄然…
阅读更多...
vue调用百度api时跨域的解决方案

vue调用百度api时跨域的解决方案

今天在开发一个项目中发现vue前端调用百度ocr识别接口出现了跨域问题&#xff01; 百度api 的接口&#xff1a; https://aip.baidubce.com/oauth/2.0/token 和百度开发工程师沟通一个多小时&#xff0c;未找到解决方案&#xff0c;忽然想到了是不是nginx配置的问题&#xff0…
阅读更多...
TCManager——中药房管理系统大作业

TCManager——中药房管理系统大作业

简介 由于最近一个月世界变化有点大&#xff0c;所以一直在同步自己的大脑&#xff0c;没有写博客。 上个月花了5天&#xff08;3天后端2天前端&#xff09;写了个经典的springbootvue2的中药房管理系统大作业——TCManager。项目已在gitee上&#xff08;校园网差&#xff0c;…
阅读更多...
vscode自动添加头注释和函数注释

vscode自动添加头注释和函数注释

下载koroFileHeader插件 然后点它的wiki文档 会跳到它的github 配置字段 OBKoro1/koro1FileHeader Wiki GitHub 先找到vscdoe的setting文件&#xff0c;两种方法&#xff1a; 1&#xff0c; 然后点这里&#xff1a; 或者去搜索框搜索&#xff1a;FileHeader 出现如下&…
阅读更多...
你的团队是王者还是青铜（下）

你的团队是王者还是青铜（下）

我们接着上篇继续聊。 问题4&#xff1a;谁动了团队的时间&#xff1f;如果重来一个迭代&#xff0c;你有7*40个小时的投资&#xff0c;你要如何决策团队的工作安排&#xff1f; “小溪&#xff0c;一会约开卡&#xff1b;小溪&#xff0c;我这有个问题&#xff1b;小溪&#…
阅读更多...
SpringBoot+Vue物流仓储管理系统

SpringBoot+Vue物流仓储管理系统

项目背景 在信息化的时代&#xff0c;效率和速度就变得尤为重要了&#xff0c;具有高效率和速度就具有更好的竞争力&#xff0c;更受客户欢迎。与此同时&#xff0c;网购与人们的生活息息相关&#xff0c;顾客在网上购买的商品需要通过物流公司对这些商品进行管理和配送&#x…
阅读更多...
十五、Docker 网络

十五、Docker 网络

1、概述 Docker 容器和服务如此强大的原因之一是您可以将它们连接在一起&#xff0c;或将它们连接到非 Docker 工作负载。Docker 容器和服务甚至不需要知道它们部署在 Docker 上&#xff0c;或者它们的对等体是否也是 Docker 工作负载。无论您的 Docker 主机运行 Linux、Window…
阅读更多...
Doo Prime 为泰国 SOS 儿童村送温暖，公益有起点爱心无疆界

Doo Prime 为泰国 SOS 儿童村送温暖，公益有起点爱心无疆界

一年一度的圣诞节即将来临&#xff0c;在这欢乐的时刻&#xff0c; Doo Prime 荣幸地宣布 &#xff0c;向泰国 SOS 儿童村捐赠了 35 万泰铢 ( 约合 1.23 万美元 )&#xff0c;作为泰国南部城市合艾府 SOS 儿童村的房屋翻修费用。 Doo Prime 希望 SOS 儿童村的孩子们都能在温馨…
阅读更多...
【小程序】网络数据请求

【小程序】网络数据请求

目录 1. 小程序中网络数据请求的限制 2. 配置 request 合法域名 3. 发起 GET 请求 4. 发起 POST 请求 5. 在页面刚加载时请求数据 5. 跳过 request 合法域名校验 6. 关于跨域和 Ajax 的说明 1. 小程序中网络数据请求的限制 出于安全性方面的考虑&#xff0c;小程序官方…
阅读更多...
【目标检测】Objects as Points

【目标检测】Objects as Points

目录概述细节anchor-base vs anchor free网络结构标注损失函数学习资料概述 本文是一个anchor-free的目标检测算法。 【2019】【CenterNet】 研究的问题&#xff1a; 如何更好地将目标检测问题建模为关键点检测问题 提出的方法&#xff1a; 一个简单高效的目标检测方法Cent…
阅读更多...
抖音年货节增长秘籍：横向做阵地，纵向定节奏，提前深种草

抖音年货节增长秘籍：横向做阵地，纵向定节奏，提前深种草

抖音好物年货节即将到来&#xff0c;对于品牌来说&#xff0c;这将是新一年首次生意爆发的机会。为了更好的融入抖音电商生态&#xff0c;做好数字化经营主阵地&#xff0c;品牌面临多个新挑战&#xff1a; 大促Bigday流量费用高&#xff0c;品牌怎样更高效获取流量&#xff1f…
阅读更多...
数据库设计说明书（GB8567——88）基于协同的在线表格forture-sheet

数据库设计说明书（GB8567——88）基于协同的在线表格forture-sheet

数据库设计说明书&#xff08;GB8567——88&#xff09; 1引言 1.1编写目的 数据库的设计是为了以后编码、测试以及维护阶段的后台数据的存储做准备。应用于系统开发前期&#xff0c;为后期数据库设计指引方向。 预期的读者&#xff1a;系统开发人员、系统测试人员和系统维…
阅读更多...
瑞昱rtl819x-SDK-v3.4.14b的watchdog分析

瑞昱rtl819x-SDK-v3.4.14b的watchdog分析

watchdog 看门狗&#xff0c;又叫watchdog timer&#xff0c;是一个定时器电路&#xff0c;一般有一个输入&#xff0c;叫喂狗或踢狗&#xff1b;一个输出到MCU 的 RST 端&#xff0c;MCU 正常工作的时候&#xff0c;每隔一段时间输出一个信号到喂狗端&#xff0c;给 WDT 清零…
阅读更多...
SQL注入渗透与攻防（八）之延时注入

SQL注入渗透与攻防（八）之延时注入

目录 基于时间的SQL盲注 - 延时注入 案列演示 基于时间的SQL盲注 - 延时注入 关于延时注入的使用场景一般在我们测试的注入点没有报错信息又没有回显点的情况下进行的。通过对于时间的延时判断来猜解数据。在实战过程中并不推荐大家通过延时注入去判断数据库&#xff0c;因为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023