vue-element-admin前端改造对接后端（前端纯小白类）

 

🖥 Vue-Element-Admin 前端改造与对接后端指南（小白版）

一、概述

• Vue-Element-Admin（VEA）：基于 Vue 3 + Element-Plus 的后台管理模板
• 目标：改造界面、修改功能，并与后端 API 完整对接
• 特点：
  1. 模板成熟，组件齐全
  2. 易于学习和改造
  3. 支持权限管理和动态路由

---

二、前提准备

1. 环境准备

• Node.js（版本 14+）
• npm 或 yarn
• Git（克隆项目用）
• IDE：VSCode 或 WebStorm

2. 克隆项目

git clone https://github.com/PanJiaChen/vue-element-admin.git
cd vue-element-admin
npm install
npm run dev
php
106 Bytes
© 菜鸟-创作你的创作

• 打开浏览器访问 http://localhost:9528 查看默认界面

---

三、目录结构基础

目录	说明
src/views	页面视图（对应路由）
src/router	路由配置
src/api	与后端交互的 API 封装
src/store	Vuex 状态管理
src/components	公共组件
src/utils	工具函数、请求封装

---

四、改造页面视图

1. 修改现有页面

// src/views/dashboard/index.vue
<template>
  <div class="dashboard">
    <h1>欢迎使用 Vue-Element-Admin</h1>
  </div>
</template>
php
126 Bytes
© 菜鸟-创作你的创作

• 将 h1 替换成你自己的文字或布局
• 使用 Element-Plus 组件快速构建表格、表单、卡片等

2. 新建页面

// src/views/user/UserList.vue
<template>
  <el-table :data="users">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getUsers } from '@/api/user'
const users = ref([])
onMounted(async () => {
  const res = await getUsers()
  users.value = res.data
})
</script>
php
426 Bytes
© 菜鸟-创作你的创作

---

五、对接后端 API

1. 封装接口

// src/api/user.js
import request from '@/utils/request'
export function getUsers() {
  return request({
    url: '/users',
    method: 'get'
  })
}
export function addUser(data) {
  return request({
    url: '/users',
    method: 'post',
    data
  })
}
php
256 Bytes
© 菜鸟-创作你的创作

2. 修改请求基础地址

// src/utils/request.js
import axios from 'axios'
const service = axios.create({
  baseURL: 'http://localhost:3000/api', // 后端接口地址
  timeout: 5000
})
export default service
php
174 Bytes
© 菜鸟-创作你的创作

---

六、绑定表单与后端

<template>
  <el-form :model="form">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
<script setup>
import { reactive } from 'vue'
import { addUser } from '@/api/user'
const form = reactive({ name: '' })
function submitForm() {
  addUser(form).then(res => {
    console.log('添加成功', res)
  })
}
</script>
php
446 Bytes
© 菜鸟-创作你的创作

---

七、权限与动态路由（可选）

• 修改 src/router/index.js 添加新页面路由
• 使用 meta: { roles: ['admin'] } 控制不同角色访问

---

八、纯小白实用技巧

1. 先用模板默认页面，再逐步改造
2. 接口调试：推荐 Postman 或 Swagger 查看后端 API
3. Element-Plus 官方文档：https://element-plus.org/
4. Vue 3 基础概念：
   • ref 与 reactive
   • setup()
   • v-model 双向绑定

---

💡 总结

• Vue-Element-Admin 改造主要流程：安装 → 运行 → 改造页面 → 封装 API → 对接后端 → 测试功能
• 小白建议 先理解模板结构和 API 封装方式，再逐步修改页面和功能
• 配合 Element-Plus 组件，可快速实现专业后台系统

https://www.52runoob.com/archives/5969