Vant前端框架 _Vant

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
支持服务器端渲染
支持国际化和语言包定制

浏览器支持

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

安装通过 npm 安装.在现有项目中使用 Vant 时，可以通过 npm 或 yarn 进行安装：
// Vue 3 项目，安装最新版 Vant：npm i vant -S// Vue 2 项目，安装 Vant 2：npm i vant@latest-v2 -S通过 CDN 安装.使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 vant 访问到所有组件。

<!-- 引入样式文件 --><linkrel="stylesheet"href=https://www.isolves.com/it/cxkf/kj/2022-06-23/"https://unpkg.com/vant@2.12/lib/index.css"/>

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

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

创建Vue项目Vue脚手架（创建、了解结构、运行流程）,不清楚vue怎么创建请点击
打开Dos命令窗口,使用下面命令创建Vue
E:>cd vue-home//创建vue 项目E:vue-home>vue create demo-vant添加安装Vant支持
项目创建完毕后,并不直接支持vant,我们需要将Vant的内容添加安装到当前Vue项目

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

添加引用

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

启动项目的命令

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

组件用法组件注册
Vant 支持多种组件注册方式，请根据实际业务需要进行选择。
全局注册
全局注册后，你可以在 App 下的任意子组件中使用注册的 Vant 组件。
【Vant前端框架】

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

局部注册
局部注册后，你可以在当前组件中使用注册的 Vant 组件。
import { Button } from 'vant';export default {components: {[Button.name]: Button,},};组件实例方法Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，我们可以通过this.$refs.xxx访问到对应的组件实例，并调用上面的实例方法。