五个最常用的 Vue 3 UI 组件

介绍：

由于我在工作的公司中角色和职责的变化，作为后端开发人员的我在去年年底选择了 Vue.js。当我深入研究时，我发现 Vue.js 非常有趣。它不像 Angular 那样有很高的学习曲线，而且比 React 更轻量和灵活。

Vue.js 绝对是一个用于构建用户界面的强大 JavaScript 框架。为了创建具有视觉吸引力的交互式用户界面，合并 UI 组件非常重要。

在这篇文章中，我将介绍我在工作中经常使用的 7 个 UI 组件。我还将介绍它们的目的、实施示例和现实生活中的用例。

UI 组件的重要性

UI 组件在 Vue.js 开发中发挥着重要作用。通过将复杂的接口分解为模块化、可重用的组件，开发人员可以创建可扩展且高效的代码，更易于维护和故障排除。

此外，合并 UI 组件还可以改善用户体验和界面一致性，因为用户将在不同的页面或应用程序中获得熟悉的体验。

Vue.js 7 个最常用的 UI 组件

1. 按钮组件

按钮使用户能够与应用程序交互。在网站上看不到按钮几乎是不可能的。它可能是最简单的组件之一，但其用途却并非如此。这是网站的号召性用语。因此，请仔细思考如何使其脱颖而出，如何处理不同的状态以及如何使用它来验证某些操作。

现实项目中的示例：注册表单的提交按钮、电子商务网站上的“添加到购物车”按钮。

这是一个简单的例子：

2. 表单组件

表单用于收集 Web 应用程序中的用户输入，并且可以针对不同的输入类型（文本、电子邮件、密码等）进行自定义。 在网站上很难不看到表单。 验证、步骤或指南等元素对于改善表单填写体验大有帮助。

现实项目中的示例：用于注册、联系或登录的用户输

<template> <div class="form-main"> <form> <div class="form-item"> <label>First Name</label> <input type="text" name="first_name" v-model="firstName" /> </div> <div class="form-item"> <label>Last Name</label> <input type="text" name="last_name" v-model="lastName" /> </div> <div class="form-item"> <Button @click="onSave" title="Save" /> </div> </form> </div></template><script setup>import { ref } from "vue";import Button from "https://codepen.io/terawuthth/pen/poqRJvZ.js";const firstName = ref("");const lastName = ref("");const onSave = () => alert("Save !!");</script><style>form { display: flex; flex-direction: column;}.form-item input { margin-left: 20px}.form-item { margin-top: 20px;}</style>

演示：https://codepen.io/terawuth/pen/KKbzLzK

3.卡片组件

卡片用于以视觉上吸引人的方式组织和显示信息。如今，卡片组件非常常见，尤其是在社交媒体网站上。尽管卡片组件以一种美观且干净的方式呈现信息，但必须小心不要在卡片上放置太多数据。

现实项目中的示例：网站上的新闻文章卡、社交媒体资料

<template> <div class="card"> <div class="img-product"> <img :src="product.image" alt="Product" /> </div> <div class="detail"> <div class="title"> <h3> <a :href="product.link">{{ product.name }}</a> </h3> </div> <div class="tag"> <a v-for="tag in tags" :href="tag.link"> <span>{{ tag.name }}</span> </a> </div> </div> </div></template><script setup>import { ref, reactive } from "vue";const tags = ref([ { link: "#", name: "notebook" }, { link: "#", name: "windows" }]);const product = reactive({ name: "Domino", image: "https://picsum.photos/id/2/250/200", link: "#"});</script><style>.card { width: 250px; height: 300px; border: 1px solid #dedfdf; border-radius: 10px;}.card:hover { border: 2px solid #adaeae; box-shadow: 2px 2px #adaeae;}.card .img-product { height: 60%; margin: 0;}.card .img-product img { height: 200px; width: 100%;}.detail { height: 40%; padding: 10px; display: flex; flex-direction: column; justify-content: start; align-items: start;}.tag a { font-size: 12px; color: black; background-color: #dedfdf; padding: 0 8px 0 8px; border-radius: 20px; text-decoration: none;}.tag a:not(:first-child) { margin-left: 8px;}.detail a { color: black; text-decoration: none;}.detail .tag a:hover { color: #fff; background-color: #fc6969;}.detail .title h3:hover { color: #fc6969;}</style>