一、Vant是什么？

先去官网看一看是怎么介绍的……

再找一找，有什么特性？

从官网中的介绍发现这个组件库主要是用来开发移动端的，提供的版本也都是主流的，其中轻量和性能极佳非常的吸引眼球，真的是这样吗？一会体验一波，在介绍的特性里面发现使用的是TypeScript编写的，曾看过一篇文章介绍TypeScript用来写大项目性能更好，更利于后期维护，看来TypeScript的道路前途光明啊，补充一下，TypeScript是微软开发的一个开源的编程语言。

二、小案例

案例效果

可以通过上面动图看出这个小案例并没有什么难点，聪明的小伙伴看了心里想这不就是 tab 切换导航来回切换内容嘛，你说的对，事实确是如此，但是对于初次使用者来说，我觉得对于它们是很快速的就可以上手的。

2.1 准备工作

首先使用 vue-cli 脚手架工具构建项目，也可以使用 vue ui 图形化界面创建项目
```
vue create vant_anli // 命令行操作

vue ui // 图形化界面操作
```

构建详情不展示了，具体操作可以找度娘，最后项目结构如下

创建好后，会有默认的文件，将不必要的文件删除掉。

为了节省时间，我直接将所有需要的工具、文件、目录文件夹相应的创建好，口述说明一下好了

安装 axios 工具
```
// axios 模块，用于发送请求
npm install axios
```

不知道怎么安装Vant组件库？怎么办？看文档

文档中说的也是非常简单明了，因为我们使用的Vue2，所以安装对应的 Vant2 就好了。

一定有小伙伴找半天找不到想要的内容，那是因为你不熟悉它，你多找一找，天天找，总会找到的，加油。

目录结构

红色标注的地方是目录文件夹

api —> index.js：放置请求接口数据的代码
components —> Article.vue：放置文章列表代码
router —> index.js：路由文件
views —> Home.vue：首页文件

最后，很重要的一步，在 main.js 文件中按需引入Vant组件，不建议引入所有，因为我们用不到那么多，反而会增加体积负担，所有推荐按需引入。

怎么引入呢？不会引，看文档！

文档介绍中可以看到有两种方式，这里使用方式一就可以了。

// 按需引入 Vant 组件, 只用到了4个组件，是不是很简单
import { Tab, Tabs, Cell, Icon } from 'vant'
// 引入样式
import 'vant/lib/index.css'

// 将需要的 Vant 组件注册到 Vue 中
Vue
  .use(Tab)
  .use(Tabs)
  .use(Cell)
  .use(Icon)

2.2 功能实现

好了，咱们的准备工作也完成了，还记得我们的案例效果吗，不记得的话我再挂一下，那么开始吧。

第一步，先去看文档找，找到你需要用到的组件，找到之后，看人家怎么写的，copy，改成自己的。

首先我们需要一个切换导航组件对吧，准备工作的时候就已经引入了，tab、tabs组件，但是怎么使用呢，去文档看。

看图，是不是并没有什么难的，对，它一点也不难，右侧还有效果演示，是不是很贴心了。

直接基础用法的代码复制到 views—> Home.vue 文件中，看看效果

是不是特别简单，但是在最终效果中有没有发现我滑动也是可以切换的呀，那怎么实现的呢？走，继续看文档。

往下翻，发现有一个演示案例，告诉我通过 swipeable 属性可以开启滑动切换标签页，注意，是给 van-tabs 标签，不要给错了。

注意

这个时候你要遇到问题，请看下图

你会发现你滑动没有效果，那是因为你只能在内容区域滑动才可以，内容区域默认没有高度是被内容给撑起来的高度，所以，解决办法，给内容区域元素加高度或者把内容变多一些，具体就不演示了，自己尝试修改一下，不难。

第二步，开始写文章列表的内容，我们用的是 Cell 组件，还是看文档，找到这一部分的内容，copy，改成自己的。

有小伙伴会想，为什么要使用 Cell组件，文档中写的不是单元格吗？？？但是你看右侧结构，我们的文章列表是不是上面是文章列表，下面是描述信息啊，所以说，用它是最合适的，为什么建议使用插槽的方式呢，因为我们最终演示的效果描述信息是不是有小图标啊，所以使用插槽的方式更方便。

将代码复制在 components —> Article.vue 文件中
```
// 只要这一部分就可以了
<van-cell value="内容" is-link>
  
  <template #title>
    <span class="custom-title">单元格</span>
    <van-tag type="danger">标签</van-tag>
  </template>
</van-cell>
```
如果想要在页面展示，需要将 Article.vue 文件引入到 Home.vue 文件中并注册，这是Vue2基础知识，就不细说了。

这时候页面就已经成功显示出来了，发现多了右侧的内容> 这个东西，这是因为咱们复制的代码 van-cell 有个 value属性，它的值是内容， > 这个是 is-link 属性显示的，不需要的话直接删除掉就好了。

当你仔细的翻阅文档，会发现早已经进行说明了。

这时候有个问题出现了，没有下方描述信息啊，这是为什么呢？去文档中找找

插槽一般用 slot 表示，在Vue中 slot 意思不就是插槽吗，所以根据提示很快就找了，看 label 说明好像是我们想要的，但是怎么用呢，咱们仔细看一下复制过来的代码啊，看到van-cell 里面有一个 template 标签，它有一个属性 #title，里面的内容就是标题部分，是不是和上面图片中 title 名称的说明对应上了啊，那么这个 label 说明是自定义标题下方 label 的内容是不是就是我们想要的效果呢，写一下。
```
<van-cell>
    
    <template #title>
    	<span class="custom-title">单元格</span>
    </template>
    <template #label>
    	<span class="custom-title">描述信息</span>
    </template>
</van-cell>
```
发现有了描述信息了，大功告成，细心的小伙伴会想 template 中的这个 # 是什么意思？？？

我回答你，你可以把它看成一个指令，像 v-on 不是绑定事件指令吗，它是不是有简写 @ 啊，你猜这个 # 是不是也是简写了，经过度娘一顿操作，查找到 # 是 v-slot 的简写，试一试。
```
<van-cell>
    
    <template #title>
    	<span class="custom-title">单元格</span>
    </template>
    <template v-slot:label>
    	<span class="custom-title">描述信息</span>
    </template>
</van-cell>
```
我试过了，正常显示，放太多图片了，这里就不放了，自己可以尝试下。

最终效果描述信息是有图标的，该怎么添加上去呢，别急，去文档中翻阅一下，看看有没有对应的演示效果。

还真有，不过发现了一个新的标签，叫 van-icon，这是什么标签呢，准备工作咱们已经引入 Icon组件并注册到 Vue 实例中了，聪明的小伙伴看了上面的图片就知道该怎么用了，但是，为了更清楚的了解，我还是要带你们去看一下文档中是怎么说的。

发现左侧有一项 icon 图标，点击之后有这么多好玩的用法，重要的是 van-icon 标签的 name 属性，它是用来传入图标名称或图片链接，那么 name 的图标名称去哪里找呢？

你点击 tab 切换栏就会有不同的图标，图标下面就是每个图标对应的 name 值了，用一用吧，有个小技巧，你点击对应的图标，它会自动复制。
```
<van-cell>
    
    <template #title>
    	<span class="custom-title">单元格</span>
    </template>
    <template v-slot:label>
    	<span class="custom-title">描述信息</span>
    	// 图标
    	<van-icon name="like-o" />
    </template>
</van-cell>
```

你看，有了吧，发现图标和文字挨的太近了，这个问题直接给图标标签加个css 样式，给个外边距就可以了。

学到这里，基本的组件使用和结构搭配应该会玩了，后面的数据渲染我就不再一一详细说明了，都是 Vue2 的基础知识，不会的小伙伴可以私信我帮你解答一下。

三、总结

因为之前用过 Element UI 组件库写过一个项目电商后台管理系统 (大家可以参考学习一下)，所以其他的组件库用起来就没有那么复杂了，基本东西很像，而且文档不管是内容还是演示效果表示的很详细，用起来就很轻松了，初次使用时肯定会哪里都不懂，多看多用多问，在学习道路上不断成长不是一件简单的事情，所以借此文章分享帮助其他人，希望大家一起加油，咱们巅峰相见。

用一用Vant组件库

目录

一、Vant是什么？

二、小案例

2.1 准备工作

2.2 功能实现

三、总结