赋予应用专业外观：Element Plus 与 UI 组件库实战

npm install element-plus

npm install -D unplugin-vue-components unplugin-auto-import

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    // 配置自动导入 API
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 配置自动导入组件
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

<template>
  <div>
    <!-- type 控制颜色主题 -->
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    
    <!-- 其他形态 -->
    <el-button plain>朴素按钮</el-button>
    <el-button round>圆角按钮</el-button>
    <el-button disabled>禁用状态</el-button>
    
    <!-- 配合 Vue 事件绑定 -->
    <el-button type="primary" :loading="isSubmitting" @click="handleSubmit">
      提交表单
    </el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const isSubmitting = ref(false)
const handleSubmit = () => {
  isSubmitting.value = true
  setTimeout(() => isSubmitting.value = false, 2000)
}
</script>

<template>
  <!-- model 绑定表单数据对象，rules 绑定校验规则 -->
  <el-form :model="formData" :rules="formRules" ref="formRef" label-width="80px">
    
    <!-- prop 对应 rules 中的字段名，用于校验 -->
    <el-form-item label="用户名" prop="username">
      <el-input v-model="formData.username" placeholder="请输入用户名" />
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input v-model="formData.password" type="password" show-password />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">立即登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue'

// 获取表单组件的真实 DOM (Template Ref)
const formRef = ref(null)

// 表单响应式数据
const formData = reactive({
  username: '',
  password: ''
})

// 表单校验规则
const formRules = reactive({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' }
  ]
})

// 提交方法
const submitForm = () => {
  // 调用表单组件暴露的 validate 方法进行校验
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('校验通过，准备发送请求:', formData)
    } else {
      console.log('表单校验失败！')
      return false
    }
  })
}
</script>

<template>
  <!-- :data 绑定数组数据 -->
  <el-table :data="tableData" border style="width: 100%">
    <!-- prop 对应数组对象中的字段，label 是表头 -->
    <el-table-column prop="date" label="日期" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="address" label="地址" />
    
    <!-- 自定义列：利用我们在 Vue 基础中学过的“插槽 (Slot)” -->
    <el-table-column label="操作">
      <template #default="scope">
        <!-- scope.row 可以拿到当前这一行的数据对象 -->
        <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'

// 模拟从后端请求回来的数据
const tableData = ref([
  { id: 1, date: '2026-06-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
  { id: 2, date: '2026-06-02', name: '张小刚', address: '北京市朝阳区大悦城' }
])

const handleEdit = (row) => {
  console.log('编辑用户:', row.name)
}
const handleDelete = (row) => {
  console.log('删除用户 ID:', row.id)
}
</script>

import { ElMessage } from 'element-plus'

const saveData = async () => {
  try {
    await api.save()
    ElMessage.success('保存成功！')
  } catch (error) {
    ElMessage.error('保存失败，请重试。')
  }
}

<template>
  <el-button @click="dialogVisible = true">打开弹窗</el-button>

  <el-dialog v-model="dialogVisible" title="提示" width="30%">
    <!-- 默认插槽：弹窗主体内容 -->
    <span>这是一段信息，你可以把表单放进来。</span>
    
    <!-- 具名插槽：弹窗底部的按钮区 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'

// 控制弹窗显示与隐藏的响应式变量
const dialogVisible = ref(false)
</script>

npm install @element-plus/icons-vue

<template>
  <div>
    <!-- 配合按钮使用 -->
    <el-button type="primary" :icon="Search">搜索</el-button>
    <el-button type="primary" :icon="Edit" circle />
    
    <!-- 单独使用图标组件 -->
    <el-icon color="#409EFC" size="20"><Setting /></el-icon>
  </div>
</template>

<script setup>
// 按需引入所需的图标组件
import { Search, Edit, Setting } from '@element-plus/icons-vue'
</script>