小伙伴们好啊，今天我们来学习vant。

介绍：

特性：

• 提供60多个高质量组件，覆盖移动端各类场景
• 性能极佳，组件平均体积不到1kb
• 单元测试覆盖率90%+，提供稳定性保障
• 完善的中英文文档和示例
• 支持Vue2&Vue3
• 支持按需引入
• 支持主题定制
• 支持国际化
• 支持TypeScript
• 支持SSR

快速上手

脚手架

在新项目中使用Vant时，推荐使用Vue官方提供的脚手架Vue Cli创建项目

#安装Vue Cli
npm install -g@vue/cli
#创建一个项目
vue creat helllo-world
#创建完成后，可以通过命令打开图形化界面

通过npm安装

在现有的项目中使用Vant时，可以通过npm或者yarn安装

#通过npm安装
npm i vant -s
#通过yarn安装
yarn add vant

引入组件

方式一，自动按需引入组件

babel-plugin-import是一款babel插件，它会在编译过程中将import的写法自动转换为按需引入的方法

#安装插件
npm i babel-pulgin-import-D

//在.babelrc 中添加配置
//注意: webpack 1 无需设置 libraryDirectory
{
"plugins"[["import",{"libraryName","vant","libarayDirectory":"es","style":true}]]
}//对于使用 babel7的用户，可以在 babel.config.js中配置
module.export = {
plugins:[
['import',{
libraryDirectory:'es',
style:true
},'vant']
]
};

//接着你可以在代码中直接引入vant组件
//插件会自动将代码转化为方式二中的按需引入形式
import {Button} from 'vant'

基础组件

Vant Button按钮

引入

import Vue from 'vue'
import{ Button } from 'vant';
Vue.use(Button);

按钮类型

支持default，p'rimary，，warning，danger五种类型，默认为default

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

朴素按钮

通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>

细边框

设置hairline属性可以开启0.5px边框，基于伪类实现

<van-button plain hairline type="primary">细边框按钮</van-button>
<van-button plain hairline type="info">细边框按钮</van-button>

禁用状态

通过disabled属性来禁用按钮，禁用状态下按钮不可点击

<van-button disabled type="primary">禁用状态</van-button>
<van-button disabled type="info">禁用状态</van-button>

按钮形状

通过square设置方形按钮，通过round设置圆形按钮

<van-button square type="primary">方形按钮</van-button>
<van-button round type="info">圆形按钮</van-button>

按钮尺寸

支持large，normal，small，mini四种尺寸，默认为normal

<van-button type="primary" side="large">大号按钮</van-button>
<van-button type="primary" side="normal">普通按钮</van-button>
<van-button type="primary" side="small">小号按钮</van-button>
<van-button type="primary" side="mini">迷你按钮</van-button>

自定义颜色

通过color属性可以自定义按钮的颜色

<van-button color="#7232dd">单色按钮</van-button>
<van-button color="#7232dd" plain>单色按钮</van-button>
<van-button color="linear-gradient(to right,#4bb0ff,#6149f6">渐变色按钮</van-button>  

Vant Image图片

引入

import Vue from 'vue'
import {Image } from 'vant'
Vue.use(Image);

基础用法

基础用法与原生img标签一致，可以设置src，width，height，alt等原生属性

<van-imagewidth="100"height="100"src="xxxx.jpg" rel="extenal nofollow" rel="external nofollow" rel="extenal nofollow"
rel="extenal nofollow" rel="extenal nofollow"/>

填充模式

通过fit属性可以设置图片填充模式

<van-imagewidth="10rem"height="10rem"fit="contain"src="xxxx.jpg" rel="extenal nofollow" rel="external nofollow" rel="extenal nofollow"
rel="extenal nofollow" rel="extenal nofollow"/>

圆形图片

通过round属性可以设置图片变圆，注意当图片宽高不相等且fit为contain或scale-down时，将无法填充一个完整的圆形。

<van-imageroundwidth="10rem"height="10rem"src="xxxx.jpg" rel="extenal nofollow" rel="external nofollow" rel="extenal nofollow"
rel="extenal nofollow" rel="extenal nofollow"/>