用一用Vant组件库

本篇文章主要讲述如何在Vue2中使用Vant2组件库，面向会Vue基础初次使用Vant组件库的对象，大概阅读时间5分钟

一、Vant是什么？

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

再找一找，有什么特性？

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

二、小案例

案例效果

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

2.1 准备工作

后端的数据接口就不展示了，只展示前端的内容

1. 首先使用 vue-cli 脚手架工具构建项目，也可以使用 vue ui 图形化界面创建项目

   vue create vant_anli // 命令行操作
   
   vue ui // 图形化界面操作
   

​ 构建详情不展示了，具体操作可以找度娘，最后项目结构如下
​
​ 创建好后，会有默认的文件，将不必要的文