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