Vant组件库

什么是Vant

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

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

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

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

Vant的优势

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

第一个Vant程序

创建Vue项目

首先确定一个要创建项目的文件夹

例如在D盘下创建vue-home文件夹

进入文件夹,在地址栏输入cmd 打开dos命令行界面

D:\vue-home>vue create demo-vant

下面我们就可以用idea打开我们创建的项目了

安装Vant支持

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

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

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

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

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

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

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

最终可能看到下面的结果

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

添加Vant引用

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

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

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

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

Vue.use(Vant)

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

文档地址(第二个是国内镜像)

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

https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

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

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

如果是拉取别人的项目需要先运行npm install

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

打开浏览器

输入localhost:8080

进入移动端页面调试模式

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

按钮组件

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

在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组件的安装和引用

表单页面

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

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

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

<template>
  <div class="about">
    <!--
      @submit和@failed都是vant组件提供的事件(Event),会在预先设置好的情况下触发
      submit是表单提交并且验证通过时触发,failed是表单提交并且验证未通过时触发
      更详细的内容可以参考官方文档
    -->
    <van-form @submit="onSubmit" @failed="onFailed">
      <van-field
          v-model="username"
          name="用户名"
          label="用户名111"
          placeholder="用户名222"
          :rules="[{ required: true, message: '请填写用户名333' }]"
      />
      <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.values
      //errorInfo.errors
      console.log('验证失败!',errorInfo);
    }
  },
};
</script>

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

area省市区选择

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

编写代码如下

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

<script>
const areaList = {
  province_list: {
    110000: '北京市',
    120000: '天津市',
    130000: '河北省',
  },
  city_list: {
    110100: '北京市',
    120100: '天津市',
    130100: '石家庄市',
    130200: '唐山市'
  },
  county_list: {
    110101: '东城区',
    110102: '西城区',
    120101: '河东区',
    120102: '河西区',
    130101: '长安区',
    130102: '桥西区',
    130201: '路南区',
    130202: '路北区',
    // ....
  },
};

export default {
  data() {
    return { areaList };
  },
};


</script>

定义路由设置 router/index.js

 const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  {
    path: '/area',
    name: 'area',
    component: () => import('../views/AreaView.vue')
  }
]

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

访问省市区选择页面

但是只有少量数据

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

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

先安装全国省市区数据包

idea的Terminal界面输入如下命令

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

如果有警告,直接无视

安装结果可能为

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

AreaView.vue代码中添加如下

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

<script>
// 从下载好的全国省市区数据库包中提取数据,命名为areaList
import {areaList} from '@vant/area-data'

export default {
  data() {
    return { areaList };
  },
  methods:{
    showArea(area){
      console.log("选择的地址信息:",area);
    }
  }
};


</script>

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

商品列表

我们的电商网站一定会需要商品列表

移动端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="8.00"
        desc="困了,类了和黑牛特饮"
        title="黑牛运动饮料"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #tags>
        <van-tag type="primary" >自营</van-tag>
        &nbsp;
        <van-tag plain type="primary">酷鲨物流</van-tag>
      </template>
      <template #footer>
        <van-button size="mini" type="primary">立即购买</van-button>
        <van-button size="mini" type="primary" plain>添加到购物车</van-button>
      </template>
    </van-card>
    
  </div>
</template>

路由配置如下

{
  path: '/list',
  name: 'list',
  component: () => import('../views/ListView.vue')
}