在 Vue 项目开发中，高效复用的组件是提升开发效率的核心。本文精选前端日常开发中使用频率最高的 5 类组件，结合实用场景与代码示例，快速掌握组件化开发精髓。
一、基础 UI 组件：构建页面骨架的核心
基础 UI 组件是页面的 "原子单元"，覆盖按钮、输入框等高频元素，通常依赖 Element Plus、Vuetify 等 UI 库实现，也可自定义封装。
- 按钮组件（Button）
按钮是交互的入口，需支持不同状态与样式。以 Element Plus 为例，其el-button组件支持多种类型：
<el-button type="primary" @click="handleSubmit">主要按钮</el-button>
<el-button type="success" icon="Check" circle></el-button>
<el-button type="warning" disabled>禁用按钮</el-button>- 输入框组件（Input）
表单交互的核心，需处理输入验证、格式限制等场景：
<el-input
v-model="username"
placeholder="请输入用户名"
:maxlength="16"
show-word-limit
@blur="validateUsername"
></el-input>关键能力：结合v-model实现双向绑定，通过prefix-icon/suffix-icon添加图标，利用blur事件触发验证逻辑。
二、表单组件：数据收集的核心工具
表单组件是用户与系统交互的关键，需兼顾易用性与校验逻辑，常用组件包括表单容器、选择器、日期选择器等。
- 表单容器（Form）
统一管理表单字段与校验规则，Element Plus 的el-form组件支持配置式校验：
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="手机号" prop="phone">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
<script setup>
const rules = {
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
]
}
</script>- 选择器组件（Select）
处理下拉选择场景，支持单选、多选与远程搜索：
<el-select
v-model="selectedCity"
multiple
filterable
remote
:remote-method="fetchCities"
placeholder="请选择城市"
>
<el-option v-for="city in cityList" :key="city.id" :label="city.name" :value="city.id"></el-option>
</el-select>三、布局组件：页面结构的搭建利器
布局组件决定页面的整体架构，常用的有容器组件、栅格系统与卡片组件。
- 栅格组件（Grid）
基于 Flexbox 实现灵活布局，Element Plus 的el-row与el-col支持 24 列栅格：
<el-row :gutter="20">
<el-col :span="8"><div class="card">左侧栏</div></el-col>
<el-col :span="16"><div class="card">主内容区</div></el-col>
</el-row>响应式适配：通过xs/sm/md等属性设置不同屏幕尺寸下的列数，如:md="8"表示中等屏幕占 8 列。
- 卡片组件（Card）
承载内容模块，提升页面层次感：
<el-card :header="cardHeader" shadow="hover">
<template #header-extra>
<el-button type="text" size="small">编辑</el-button>
</template>
<div>卡片内容区域</div>
</el-card>四、导航组件：引导用户的交互枢纽
导航组件负责页面跳转与功能入口，核心包括菜单、分页与标签页。
- 菜单组件（Menu）
实现侧边栏或顶部导航，支持多级菜单：
<el-menu
default-active="1"
mode="vertical"
@select="handleMenuSelect"
>
<el-sub-menu index="1">
<template #title><span>数据管理</span></template>
<el-menu-item index="1-1">用户列表</el-menu-item>
<el-menu-item index="1-2">订单管理</el-menu-item>
</el-sub-menu>
</el-menu>- 分页组件（Pagination）
处理大量数据的分页展示，减少性能损耗：
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
layout="prev, pager, next, jumper, total"
></el-pagination>五、反馈组件：提升用户体验的关键
反馈组件用于告知用户操作结果，常用的有弹窗、提示与加载组件。
- 弹窗组件（Dialog）
处理模态交互场景，如表单弹窗、详情弹窗：
<el-button @click="dialogVisible = true">打开弹窗</el-button>
<el-dialog v-model="dialogVisible" title="弹窗标题" width="50%">
<div>弹窗内容</div>
<template #footer>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</template>
</el-dialog>有了这些常用的组件，可以实现一个如图所示的电商网页：上面有一行菜单栏；菜单栏下面是轮播图；再下面就是购物的主体内容；最后还可以增加一个版权声明。
在这里菜单显示模式为水平导航栏，当然，如果想设置为垂直侧边栏就用vertical，暂时设置一级标题就行了，然后设置菜单背景色为蓝色 #0aa1ed，普通菜单项文字颜色为白色 #fff，并默认选中第3个菜单项（基于index）将激活状态的菜单项文字显示为黄色 #ff0
<template>
<h1>电商网页</h1>
<el-container>
<el-header>
<el-menu
mode="horizontal"
background-color="#0aa1ed"
text-color="#fff"
default-active="3"
active-text-color="#ff0"
>
<el-menu-item index="1">精彩活动</el-menu-item>
<el-menu-item index="2">精品女装</el-menu-item>
<el-menu-item index="3">品牌男装</el-menu-item>
<el-menu-item index="4">母婴产品</el-menu-item>
<el-menu-item index="5">数码科技</el-menu-item>
</el-menu>
</el-header>
<el-main>
</el-main>
<el-footer style="height: 200px;background-color: #282c30;color: #666;padding-top: 40px">
<p>Copyright © xxxxxxx</p>
</el-footer>
</el-container>
</template>菜单栏下面的轮播图和各个商品需要采用遍历的方式生成，依赖 Element Plus 的 el-carousel、el-row、el-col、el-card 等组件实现，使用轮播图容器el-carousel，遍历 bannerArr 数组渲染轮播项，固定高度 240px；el-row/el-col为24列栅格系统布局商品，span="6" 表示每列占 1/4 宽度（4 个商品 / 行）商品卡片容器el-card，包含商品图片、标题、价格，原价划掉，现价标红。
<el-main>
<el-carousel style="height: 240px;">
<el-carousel-item v-for="item in bannerArr">
<img :src="item" style="width: 100%;">
</el-carousel-item>
</el-carousel>
<el-row :gutter="10">
<el-col :span="6" v-for="p in productArr" style="margin: 10px 0;">
<el-card>
<img :src="p.url" style="width: 100%;">
<p style="white-space: nowrap;overflow: hidden;
text-overflow: ellipsis;">{{p.title}}</p>
<div style="height: 21px;">
<span style="float: left;color: red;">￥{{p.price}}
<s>￥{{p.oldPrice}}</s>
</span>
</div>
</el-card>
</el-col>
</el-row>
</el-main>这样就完成了一个简单的电商购物网页：
简单的电商页面 · a010ac4 · Admin/前端 - Gitee.com
掌握这些高频组件的用法，能极大提升 Vue 项目的开发效率与代码质量。实际开发中，可结合业务需求对基础组件进行二次封装，形成更贴合项目的组件库。