第 1 步：写 API 接口 ⭐⭐⭐

// src/api/system/你的功能.js
  import request from '@/utils/request'

  // 查询列表
  export function listXxx(query) {
    return request({
      url: '/system/xxx/list',
      method: 'get',
      params: query
    })
  }

  // 新增
  export function addXxx(data) {
    return request({
      url: '/system/xxx',
      method: 'post',
      data: data
    })
  }

  // 修改
  export function updateXxx(data) {
    return request({
      url: '/system/xxx',
      method: 'put',
      data: data
    })
  }

  // 删除
  export function delXxx(id) {
    return request({
      url: '/system/xxx/' + id,
      method: 'delete'
    })
  }

你只需要改的地方：

• ✏️ 把 xxx 改成你的功能名（如 dept、notice）
• ✏️ 把 URL 改成后端给你的接口地址

第 2 步：复制我给你的页面模板 ⭐⭐⭐

直接复制我上面给的"页面组件最小模板"，然后只改这几个地方：

<script setup name="你的功能名">  ← ① 改这里
import { listXxx, addXxx, updateXxx, delXxx } from '@/api/system/你的功能'  ← ② 改这里

// ③ 改查询条件
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  name: undefined  // 改成你需要的字段
})

// ④ 改表单字段
const form = ref({
  id: undefined,
  name: undefined,  // 改成你需要的字段
  status: undefined
})

// ⑤ 改验证规则
const rules = {
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
}
</script>

<template>
  <!-- ⑥ 改表格列 -->
  <el-table-column label="名称" prop="name" />
  <el-table-column label="状态" prop="status" />
  
  <!-- ⑦ 改表单项 -->
  <el-form-item label="名称" prop="name">
    <el-input v-model="form.name" />
  </el-form-item>
</template>

第 3 步：测试功能 ⭐⭐⭐

1. 启动项目：npm run dev
2. 浏览器访问你的页面
3. 点点按钮，看看能不能正常工作

✅ 你不需要了解的东西（暂时）

❌ 不需要了解 Vue Router 的复杂配置（路由后端会返回）

❌ 不需要了解 Pinia 状态管理（公共状态已经配置好）

❌ 不需要了解 Axios 拦截器（request.ts 已封装好）

❌ 不需要了解 权限系统原理（用 v-hasPermi 就行）

❌ 不需要了解 构建配置（vite.config.ts 已配好）

🎓 你只需要懂这些

✅ 必须懂（15分钟学会）

1.ref 是什么

const name = ref('张三')
name.value = '李四'  // 修改值要用 .value

2.如何绑定数据

<el-input v-model="form.name" />  ← form.name 自动双向绑定

3.如何调用方法

<el-button @click="handleAdd">新增</el-button>

4.Promise 基础

listXxx(queryParams.value).then(res => {
  // 请求成功后执行这里
  dataList.value = res.rows
})