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布局设计事件，墙裂推荐学习