likes
comments
collection
share

不要再手搓组件了，vant组件库里都有！

作者站长头像
站长
· 阅读数 26

前言

在我们平时写前端项目时，常常需要编写一些能完成指定且独立功能的组件，但是如果一个项目中所有的组件都是自己来手搓的话，这样项目的进度就会大大的延缓，编写速度缓慢，而且一不小心你写的组件还可以出现一些莫名其妙无法解决的bug，所以今天我们介绍vant组件库，在你项目中所需要的组件库都可以从中"取"出来,放到自己的项目中用，这样就能加快你项目完成的效率，并且能使你的页面更加美观且不容易卡bug。

例如我写的一些项目中的例子：

不要再手搓组件了，vant组件库里都有！

（上方引入菜单、添加、收藏、喜欢组件）

----------------------------------------------------------------

不要再手搓组件了，vant组件库里都有！

（加号组件）

----------------------------------------------------------------

不要再手搓组件了，vant组件库里都有！

（星星评分组件）

----------------------------------------------------------------

总之vant组件库给我们提供很多使用起来很便利且美观的组件，让我们的前端项目更加的优雅，有质感。

vant4组件库

vant是什么？

Vant 是一个轻量、可定制的移动端组件库

vant特性：

  • 🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
  • 🚀 80+ 个高质量组件，覆盖移动端主流场景
  • 🚀 零外部依赖，不依赖三方 npm 包
  • 💪 使用 TypeScript 编写，提供完整的类型定义
  • 💪 单元测试覆盖率超过 90%，提供稳定性保障
  • 📖 提供丰富的中英文文档和组件示例

vant4新特性：

  • 支持深色模式

  • 包含以下新组件

  • 按需引入方式的新调整 --- 不再强依赖 Babel 编译，项目可以使用 SWC、esbuild 等现代编译工具，进而提升编译效率。不再受到 babel-plugin-import 的 import 限制，可以从 Vant 中导入除组件以外的内容，比如 Vant 4 中新增的 showToast 方法，

使用vant4组件库

使用vant4组件库也很简单，只需要跟着我做以下几步：

1. 安装 Vant

首先，确保你的项目已经使用了 Vue 3。然后，通过 npm 或 yarn 安装 Vant：

bash
深色版本
1npm install vant
2# 或者使用 yarn
3yarn add vant

2. 引入样式

Vant 4 的样式需要单独引入，你可以选择全局引入或者按需引入。全局引入的方式如下：

javascript
深色版本
1// main.js 或 main.ts
2import 'vant/lib/index.css';

3. 注册组件

Vant 支持全局注册和局部注册组件。下面是一些注册组件的方法：

全局注册

如果你希望在整个应用程序中都可以使用 Vant 的组件，可以在创建 Vue 应用实例时使用 app.use() 方法全局注册，引入您在vant4文档中想要的组件名。

javascript
深色版本
import { createApp } from 'vue';
import App from './App.vue';
import { Button, Dialog } from 'vant';

const app = createApp(App);
app.use(Button).use(Dialog);
app.mount('#app');

局部注册

如果你只想在特定的组件中使用 Vant 的组件，可以在组件的 components 选项中局部注册：

javascript
深色版本
import { Button, Dialog } from 'vant';

export default {
  components: {
    VanButton: Button,
    VanDialog: Dialog,
  },
};

4. 使用组件

一旦注册了组件，你就可以在模板中使用它们了：

html
<template>
  <van-button type="primary">点击我</van-button>
</template>

小结

我们已经探讨了 Vant 的诸多优点，从其轻量级的架构到强大的功能，从易用的 API 到详尽的文档支持，Vant 显然是那些希望加速开发流程、提升用户体验的开发者的理想选择。更重要的是，Vant 的开源精神鼓励着社区的共同成长，每一次的更新迭代都是开发者智慧的结晶，每一次的使用都是对技术进步的推动。

因此，亲爱的开发者们，不要再手搓组件了，Vant 组件库里都有！

转载自:https://juejin.cn/post/7397615008392429578
评论
请登录