Vant使用详解

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)。

2.Vant的优势

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

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

所以在进行计算机浏览器开发组件时可以使用ElementUI

移动端页面开发时可以使用Vant

3.Vant特性

(1)性能极佳，组件平均体积小于 1KB（min+gzip）

(2)65+ 个高质量组件，覆盖移动端主流场景

(3)使用 TypeScript 编写，提供完整的类型定义

(4) 单元测试覆盖率超过 90%，提供稳定性保障

(5) 提供完善的中英文文档和组件示例

(6)......

4.创建Vue项目

创建Vue项目

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

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

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

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

创建时具体选项,按照vue创建步骤

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

5.安装Vant支持

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

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

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

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

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

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

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

最终可能看到下面的结果

added 4 packages in 3s

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

6.添加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界面中编写如下代码

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

打开浏览器

输入localhost:8080

进入移动端页面调试模式

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

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

Vant 2 - Mobile UI Components built on Vue