Vue项目实战 —— 后台管理系统( pc端 )

前期回顾

我只写注释 —— 让Ai写代码_的博客-CSDN博客前期回顾 Vue项目实战 —— 哔哩哔哩移动端开发—— 第二篇_的博客-CSDN博客https://blog.csdn.net/m0_57904695/article/details/123881330在vsCode中下载copilot注册账号，官网GitHub Copilot · Your AI pair programmer等待开通 通知…[这里是图片003]https://blog.csdn.net/m0_57904695/article/details/123935998?spm=1001.2014.3001.5501

通用版后台管理系统，如果你是多年的程序猿（媛），你可以巩固一下，，也可以给我提提意见。此典型项目，与企业级开发很是接近！掌握即可领悟雷电，如果你是大学生，它完全可以作为你毕业设计，毕竟你确实写过，项目开发全程采用组件化思想

---

话说江湖风起云涌，虽无刀光剑影、却依旧暗藏伏机！程序江湖不进则退，必然需要更加卖力，

目录

适合谁

资料在哪

技术栈有哪些

图例?：

开始

首页架构

1、main 如图展示，配合代码在下面

2、下一步写侧导航 如图

固定数据效果：

?动态数据效果：?

3、根据数据配置路由，menu路由跳转 和 默认显示路由

页面Header

1、封装header

?2、点击折叠按钮实现折叠

---

适合谁

1 、大学即将毕业 或者 自学前端 缺乏项目经验的
2 、入职以后需要做vue 后台管理系统的
3 、后端开发 没有前端经验 要做vue + java 后台管理项目的
4、缺乏vue实战项目经验 基础不是很好的 本教程非常的详细 每一步都总结在md文档里面
参考视频：哔哔哩哩搜索程序员Allen

资料在哪

1、为解决网址问题，项目采用json数据格式，我会将资料发在主页资源《通用后台管理资料》，也可以直接在此博客中复制数据（json）

技术栈有哪些

vue-router + vue + axios + ele + 二次封装axios + mock模拟数据源 + 图表（折、柱、饼），

图例：

图例过多不一一展示了，直接开始写

开始

首页架构

1、main 如图展示，主页结构

位置：Main.vue
<template>
  <div id="main">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  methods: {},

  computed: {},
  components: {},
  created() {},
};
</script>

<style lang="scss" scoped>
//@import '引入的css文件';
#main {
  width: 100%;
  height: 100%;
  .el-header,
  .el-footer {