Vant 轻量、可靠的移动端 Vue 组件库

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

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

文档：V2开发手册： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

特性：

• 性能极佳，组件平均体积小于 1KB（min+gzip）
• 65+ 个高质量组件，覆盖移动端主流场景
• 使用 TypeScript 编写，提供完整的类型定义
• 单元测试覆盖率超过 90%，提供稳定性保障
• 提供完善的中英文文档和组件示例
• 提供 Sketch 和 Axure 设计资源
• 支持 Vue 2、Vue 3 和微信小程序
• 支持主题定制，内置 700+ 个主题变量
• 支持按需引入和 Tree Shaking
• 支持服务器端渲染
• 支持国际化和语言包定制

浏览器支持

1. Vant 2 支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。
2. Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致）。

安装

通过 npm 安装.在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：

// Vue 3 项目，安装最新版 Vant：nnpm i vant -Sn// Vue 2 项目，安装 Vant 2：nnpm i vant@latest-v2 -S

通过 CDN 安装.使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 vant 访问到所有组件。

<!-- 引入样式文件 -->n<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>nn<!-- 引入 Vue 和 Vant 的 JS 文件 -->n<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>n<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>nn<script>n // 在 #app 标签下渲染一个按钮组件n new Vue({n el: '#app',n template: `<van-button>按钮</van-button>`,n });nn // 调用函数组件，弹出一个 Toastn vant.Toast('提示');nn // 通过 CDN 引入时不会自动注册 Lazyload 组件n // 可以通过下面的方式手动注册n Vue.use(vant.Lazyload);n</script>

通过脚手架安装.在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。

// 安装 Vue Clinnpm install -g @vue/clin// 创建一个项目nvue create hello-worldn// 创建完成后，可以通过命令打开图形化界面，如下图所示nvue ui

创建Vue项目

Vue脚手架（创建、了解结构、运行流程）,不清楚vue怎么创建请点击

打开Dos命令窗口,使用下面命令创建Vue

E:>cd vue-homen//创建vue 项目nE:vue-home>vue create demo-vant

添加安装Vant支持

项目创建完毕后,并不直接支持vant,我们需要将Vant的内容添加安装到当前Vue项目

//首先要进入当前vue项目的文件夹nE:vue-home>cd demo-vantn//后运行安装添加Vant支持的npm命令nE:vue-homedemo-vant>npm i vant@latest-v2 -Sn//安装结束后可能有一下警告,可以无视掉n//看到的提示可能是nadded 5 packages in 3sn//然后我们使用Idea打开这个项目

添加引用

//项目打开后找到srcmain.jsn//添加Vant 引用如下三行代码nimport Vant from 'vant'nimport 'vant/lib/index.css'nVue.use(Vant)

启动项目的命令

//在idea提供的Terminal中敲入代码即可nnpm run serven//启动之后可以在localhost:8080中访问n//[注意]切换为移动端界面,浏览器为例按F12进入调试模式后点击移动端调试即

组件用法

组件注册

Vant 支持多种组件注册方式，请根据实际业务需要进行选择。

全局注册

全局注册后，你可以在 app 下的任意子组件中使用注册的 Vant 组件。

import Vue from 'vue';nimport { Button } from 'vant';nn// 方式一. 通过 Vue.use 注册n// 注册完成后，在模板中通过 <van-button> 或 <VanButton> 标签来使用按钮组件nVue.use(Button);nn// 方式二. 通过 Vue.component 注册n// 注册完成后，在模板中通过 <van-button> 标签来使用按钮组件nVue.component(Button.name, Button);

局部注册

局部注册后，你可以在当前组件中使用注册的 Vant 组件。

import { Button } from 'vant';nnexport default {n components: {n [Button.name]: Button,n },n};

组件实例方法

Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，我们可以通过this.$refs.xxx访问到对应的组件实例，并调用上面的实例方法。

<!-- 通过 ref 属性将组件绑定到 this.$refs.checkbox 上 -->n<van-checkbox v-model="checked" ref="checkbox"> 复选框 </van-checkbox>nnexport default {n data() {n return {n checked: false,n };n },n // 注意：组件挂载后才能访问到 ref 对象n mounted() {n this.$refs.checkbox.toggle();n },n}

浏览器适配

Viewport 布局

Vant 默认使用 px 作为样式单位，如果需要使用 viewport 单位 (vw, vh, vmin, vmax)，推荐使用 postcss-px-to-viewport 进行转换。

postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。

PostCSS PostCSS 示例配置

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基础上根据项目需求进行修改。

// postcss.config.jsnmodule.exports = {n plugins: {n 'postcss-px-to-viewport': {n viewportWidth: 375,n },n },n};

Tips: 在配置 postcss-loader 时，应避免 ignore node_modules 目录，否则将导致 Vant 样式无法被编译。

表单组件

使用表单组件实现登录页面,是Vant直接提供的组件

//先添加引用.引用之后 main.js文件内容为nimport Vue from 'vue'nimport App from './App.vue'nimport router from './router'nimport store from './store'nimport Vant from 'vant'nimport 'vant/lib/index.css'nimport { Form } from 'vant';nimport { Field } from 'vant';nnVue.use(Form);nVue.use(Field);nVue.use(Vant)nVue.config.productionTip = falsen// 略

向vue文件中复制文档中提供的代码

注意复制的位置,我们以AboutView.vue为例

<template>n<div class="about">n<van-form @submit="onSubmit">n<van-fieldnv-model="username"nname="用户名"nlabel="用户名"nplaceholder="用户名"n:rules="[{ required: true, message: '请填写用户名' }]"n/>nn<van-fieldnv-model="password"ntype="password"nname="密码"nlabel="密码"nplaceholder="密码"n:rules="[{ required: true, message: '请填写密码' }]"n/>nn<div style="margin: 16px;">n<van-button round block type="info" native-type="submit">提交</van-button>n</div>n</van-form>n</div>n</template>nn<script>nexport default {ndata() {nreturn {nusername: '',npassword: '',n};n},nnmethods: {nonSubmit(values) {nconsole.log('submit', values);n},n},n};n</script>

然后直接访问about页面即可

area省市区选择

我们在手机app上经常需要选择省市区

Vant直接提供了这个组件

我们创建AreaView.vue文件

<template>n<div>n<van-area title="标题" :area-list="areaList" />n</div>n</template>nn<script>nconst areaList = {nprovince_list: {n110000: '北京市',n120000: '天津市',n},ncity_list: {n110100: '北京市',n120100: '天津市',n},ncounty_list: {n110101: '东城区',n110102: '西城区',n// ....n},n};nnexport default{ndata(){nreturn{areaList};n}n}n</script>

别忘了要设置路由才能访问这个页面

router文件夹下的index.js文件中添加路由代码

const routes = [n{npath: '/',nname: 'home',ncomponent: HomeViewn},n{npath: '/about',nname: 'about',ncomponent: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')n},n{npath: '/area',nname: 'area',ncomponent: () => import('../views/AreaView.vue')n}n]

然后可以通过输入路径

localhost:8080/area访问这个页面

但是我们现在只能访问我们数组中定义的少数省市区

怎么才能想文档中显示所有省市区呢

需要引用官方提供的一个地址列表

//dos(Terminal中也可以)运行安装命令nE:vue-homedemo-vant>npm i @vant/area-data

这样就安装了所有省市区的数据到当前的项目

我们只需要修改js代码,让arealist引用这个数据内容即可

<script>nimport {areaList} from '@vant/area-data'nexport default{ndata(){nreturn{areaList};n}n}nn</script>

商品列表页

我们在开发酷鲨商城的过程中

移动端需要很多页面,商品列表页面是比较常见的页面之一

我们以商品列表页为例

带领大家开发一个页面

创建页面和路由配置

router/index.js添加路由信息

{npath: '/list',nname: 'list',ncomponent: () => import('../views/ListView.vue')n}

创建ListView.vue

<template>n<div>n<van-row>n<van-col span="8">综合</van-col>n<van-col span="8">销量</van-col>n<van-col span="8">价格</van-col>n</van-row>n<van-cardnnum="1"nprice="268.00"ndesc="超10000人的信任"ntitle="酷鲨牌鼠标键盘套装"nthumb="https://img01.yzcdn.cn/vant/ipad.jpeg"n>n<template #tags>n<van-tag type="danger">自营</van-tag>n<van-tag plain type="danger">酷鲨物流</van-tag>n</template>n<template #footer>n<van-button size="mini">按钮</van-button>n<van-button size="mini">按钮</van-button>n</template>n</van-card>n<van-cardnnum="1"nprice="268.00"ndesc="超10000人的信任"ntitle="酷鲨牌鼠标键盘套装"nthumb="https://img01.yzcdn.cn/vant/ipad.jpeg"n>n<template #tags>n<van-tag type="danger">自营</van-tag>n<van-tag plain type="danger">酷鲨物流</van-tag>n</template>n<template #footer>n<van-button size="mini">按钮</van-button>n<van-button size="mini">按钮</van-button>n</template>n</van-card>n</div>n</template>nn<script>nexport default {nname: "ListView"n}n</script>

添加事件调用的参考代码

<template>n<div>n<van-area title="标题" :area-list="areaList"n@confirm="showName"/>n</div>n</template>nn<script>nimport {areaList} from '@vant/area-data'nexport default{ndata(){nreturn{areaList};n},nmethods:{nshowName:function(msg){nconsole.log(msg[0].code+""+msg[0].name);nconsole.log(msg[1].code+""+msg[1].name);nconsole.log(msg[2].code+""+msg[2].name);n}n}n}n</script>

学习记录，如有侵权请联系删除。参考于vant-contrib.gitee.io/vant/v2/#/zh-CN/coupon-list