Vue学习：22.Vue组件库-Vant
Vue组件库是一系列预先构建好的、可复用的UI组件集合，它们设计用于加速Vue.js应用程序的开发过程。这些组件通常遵循一定的设计规范，提供统一的外观和交互体验，让开发者能够快速搭建用户界面。
组件库举例
-
Vant: 专注于移动端的轻量级UI库，提供丰富的基础组件和业务组件，适用于快速构建高性能的移动端页面。
-
Element UI: 针对桌面端Web应用的Vue组件库，包含丰富的表单元素、布局组件、导航组件等，适合企业级后台管理系统的开发。
-
Quasar Framework: 是一个全方位的Vue.js框架，不仅包含UI组件，还提供构建SPA、PWA、SSR、移动应用和桌面应用的能力。
-
VueStrap: 结合了Vue.js和Bootstrap的组件库，如果你已经熟悉Bootstrap，这是一个很好的选择。
Vant
Vant 是一款专为移动端开发设计的轻量级、可靠的 Vue.js 组件库，由有赞前端团队维护并开源。它以 MIT 开源协议发布，旨在帮助开发者快速构建高性能的移动应用。
1. 简介
- 名称: Vant（发音为 vānt）
- 定位: 移动端UI组件库，特别适合于构建移动端网页应用和混合应用。
- 开源时间: 自2017年起开源。
- 支持框架: 主要支持Vue.js，官方提供了Vue 2和Vue 3的版本，同时还有针对微信小程序的版本。社区也维护了React版本和支付宝小程序版本。
2. 特点
- 轻量级: 组件经过严格压缩和优化，平均体积小于1KB（min+gzip），确保应用加载速度快，运行效率高。
- 丰富组件: 提供超过60个高质量组件，覆盖了移动端开发的常见场景，包括导航、表单、按钮、列表、轮播图、对话框、弹出层、加载提示等。
- 易用性: 提供详细的中文和英文文档，以及丰富的示例代码，方便开发者快速上手和集成。
- 按需引入: 支持按需引入，开发者可以根据项目需求仅引入所需的组件，减少应用体积。
- 主题定制: 支持自定义主题颜色和其他样式，以适应不同品牌的设计需求。
- 国际化: 内置国际化支持，便于开发多语言应用。
- TS支持: 对TypeScript友好，提供类型定义文件，增强代码的类型安全。
3. 组件
- 导航栏: 包括底部导航栏、顶部导航栏、侧边栏等，支持自定义样式和动画效果。
- 表单组件: 如输入框、选择器、开关、滑块等，满足表单填写的各种需求。
- 反馈组件: 如Toast、Loading、Dialog、Notify等，用于提供用户操作反馈。
- 布局组件: Grid、Flex等，帮助快速构建页面布局。
- 展示组件: 如Image、Swipe（轮播图）、List（列表）等，用于内容展示。
- 业务组件: 包括商品卡片、地址选择器、购物车组件等，针对电商等特定场景优化。
4. 使用
- 安装: 可以通过npm或yarn安装，如 ：
# Vue 3 项目，安装最新版 Vant：
npm i vant -S
# Vue 2 项目，安装 Vant 2：
npm i vant@latest-v2 -S使用 Vant 最简单的方法是直接在 html 文件中引入 CDN 链接，之后你可以通过全局变量 vant 访问到所有组件。
<!-- 引入样式文件 -->
<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
<script>
// 在 #app 标签下渲染一个按钮组件
new Vue({
el: '#app',
template: `<van-button>按钮</van-button>`,
});
// 调用函数组件，弹出一个 Toast
vant.Toast('提示');
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
Vue.use(vant.Lazyload);
</script>官方推荐以下免费 CDN 服务来使用 Vant:
注意：免费 CDN 一般用于制作原型或个人小型项目，不推荐在企业生产环境中使用免费 CDN。
对于企业开发者，建议使用以下方式：
- 通过 npm 引入，并通过构建工具进行打包
- 下载对应文件，并托管在你自己的服务器或 CDN 上
在新项目中使用 Vant 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Vant。
# 安装 Vue Cli
npm install -g @vue/cli
# 创建一个项目
vue create hello-world
# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui- 引入: 在Vue项目中，通过
import语句引入所需组件，并使用Vue的use方法注册。
方式一. 自动按需引入组件 (推荐)
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。
# 安装插件
npm i babel-plugin-import -D// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';方式二. 手动按需引入组件
在不使用插件的情况下，可以手动引入需要的组件。
import Button from 'vant/lib/button';
import 'vant/lib/button/style';方式三. 导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);5. 社区与更新
- Vant拥有活跃的社区和持续的更新维护，确保其与Vue.js的最新版本兼容，并不断加入新功能和改进现有组件。
- 官方网站提供详细的文档、示例代码和在线演示，便于开发者学习和调试。
注：组件库很容易上手，并且极大地节省了css布局设计事件，墙裂推荐学习
