前言：

记得自己大二时（2017年），想搭建一个后台管理系统，当时头脑想的是用原生JS写的。我肯定干不出来，后来乖乖用了当时比较流行的layui，就算现在也真的难以做下去。

这几天，有了需要后端管理系统的需求，我本想接着随便找一个框架改改算了。后来又改变主意了，决定自己从头搭建一个。

（1）长期考虑，以后确实很多时候，都需要一个干净的、简单的后端管理系统

（2）理解UI框架的搭建过程，尤其是知道细节，我讨厌模模糊糊的感觉

一、下图就是系统首页框架结构：跟主流后台管理系统框架结构差不多

二、项目完整代码在gitee上已经公开

下面连接就是项目源码地址

三、具体搭建过程

现在我们从零开始，讲如何来搭建这样的一个前端页面框架，主要用到 VUE3 + -plus

1. 生成项目

这里使用 vite生成项目，理由就是vite比编译项目更快

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

2. 导入-plus

这里是官网地址：-plus 官网地址

npm install element-plus --save

然后我们打开修改/src/main.js文件，引入 -plus

import { createApp } from 'vue'
import App from './App.vue'//导入路由
import router from './router/index'//全局导入Element plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.mount('#app'

3. 使用布局组件（-plus里面的）

使用组件搭建结构

最后，具体搭建成的如下图

具体代码如下

4. 在Aside左侧部分添加 导航菜单

具体在-plus里面，如下图

我做出来的效果图如下

思路：

1. 要自己配置一个菜单结构项目

//左侧菜单选项配置

: [

title: "用户",

index: "user",

},

title: "文章",

subs: [

title: "文章列表",

index: "",

},

],

},

title: "测试",

index: "test",

},

2. 根据菜单结构关键字，区分是否有二级菜单,，进行不同的渲染

代码如下（上面的代码我就不重复，只粘贴新增的）

     
VUE-ADMIN

5. main里面放标签页

思路，源代码里，我让首页是固定，就是不可删除的

6. 最关键的逻辑部分是 标签页和导航菜单 都可以 控制路由

详细的看完整的代码吧