关键词：
前言：
记得自己大二时（2017年），想搭建一个后台管理系统，当时头脑想的是用原生JS写的。我肯定干不出来，后来乖乖用了当时比较流行的layui，就算现在也真的难以做下去。
这几天，有了需要后端管理系统的需求，我本想接着随便找一个框架改改算了。后来又改变主意了，决定自己从头搭建一个。
（1）长期考虑，以后确实很多时候，都需要一个干净的、简单的后端管理系统
（2）理解UI框架的搭建过程，尤其是知道细节，我讨厌模模糊糊的感觉
一、下图就是系统首页框架结构：跟主流后台管理系统框架结构差不多
二、项目完整代码在gitee上已经公开
下面连接就是项目源码地址
https://gitee.com/tyx_0/open-back-manage
https://gitee.com/tyx_0/open-back-manage
三、具体搭建过程
现在我们从零开始，讲如何来搭建这样的一个前端页面框架，主要用到 VUE3 + Element-plus
1. 生成项目
这里使用 vite生成项目，理由就是vite比webpack编译项目更快
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue2. 导入Elment-plus
这里是官网地址：Element-plus 官网地址
npm install element-plus --save然后我们打开修改/src/main.js文件，引入 element-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. 使用Container布局组件（element-plus里面的）
使用Container组件搭建结构
最后，具体搭建成的如下图
具体代码如下
<template>
<div class="common-layout">
<el-container class="box">
<!-- 左侧菜单栏 -->
<el-aside class="el-aside">
<h1 class="logoBox">VUE-ADMIN</h1>
</el-aside>
<el-container>
<!-- header头部菜单 -->
<el-header class="header"> </el-header>
<!-- main主体模块：标签页 + 当前路由内容 -->
<el-main class="el-main"> </el-main>
</el-container>
</el-container>
</div>
</template>
<style scoped>
.logoBox
position: absolute;
top: 18px;
left: 30px;
font-size: 24px;
color: #fff;
.box
width: 100vw;
height: 100vh;
.header
padding: 0;
height: 58px;
background-color: #545c64;
/* 去除默认的边框样式 */
.el-header .el-menu
border-bottom: none;
.el-aside .el-menu
border-right: none;
.el-main
background-color: #e9eef3;
.el-aside
width: 240px;
background: #545c64;
padding-top: 58px;
</style>
4. 在Aside左侧部分添加 导航菜单
具体在Element-plus里面，如下图
我做出来的效果图如下
思路：
1. 要自己配置一个菜单结构项目
//左侧菜单选项配置
asideMenu: [
title: "用户",
index: "user",
,
title: "文章",
subs: [
title: "文章列表",
index: "articleList",
,
],
,
title: "测试",
index: "test",
,
]
2. 根据菜单结构关键字，区分是否有二级菜单,，进行不同的渲染
代码如下（上面的代码我就不重复，只粘贴新增的）
<!-- 左侧菜单栏 -->
<el-aside class="el-aside">
<h1 class="logoBox">VUE-ADMIN</h1>
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
:router="true"
>
<template v-for="item in asideMenu">
<!-- 两级菜单 -->
<template v-if="item.subs">
<el-sub-menu :index="item.title" :key="item.title">
<!-- 一级菜单标题 -->
<template #title>
<el-icon><document /></el-icon>
<span> item.title </span>
</template>
<!-- 二级菜单标题 -->
<template v-for="subItem in item.subs" :key="subItem.index">
<el-menu-item
:index="subItem.index"
@click="() => handleMenuItem(subItem)"
> subItem.title </el-menu-item
>
</template>
</el-sub-menu>
</template>
<!-- 一级菜单 -->
<template v-else>
<el-menu-item
:index="item.index"
:key="item.title"
@click="() => handleMenuItem(item)"
>
<el-icon><document /></el-icon>
<span> item.title </span>
</el-menu-item>
</template>
</template>
</el-menu>
</el-aside>5. main里面放标签页
思路，源代码里，我让首页是固定，就是不可删除的
6. 最关键的逻辑部分是 标签页和导航菜单 都可以 控制路由
详细的看完整的代码吧
从零开始搭建vue+element-ui后台管理系统项目到上线(代码片段)
...言之前有些过移动端的项目搭建的文章，感觉不写个pc端管理系统老感觉少了点什么，最近公司项目比较多，恰巧要做一个申报系统的后台管理系统，鉴于对vue技术栈比较熟悉，所以考虑还是使用vue技术栈来做；看过一个不错的... 查看详情
从零开始搭建公司后台技术栈(代码片段)
点击上方关注“终端研发部”设为“星标”，和你一起掌握更多数据库知识有点眼晕，以下只是我们会用到的一些语言的合集，而且只是语言层面的一部分，就整个后台技术栈来说，这只是一个开始，从语... 查看详情
从零开始，搭建一个简单的uvm验证平台(代码片段)
...08;一）4.UVM基础-TLM通信机制（二）...还在更新从零搭建一个UVM验证平台：从零开始，搭建一个简单的UVM验证平台（一）从零开始，搭建一个简单的UVM验证平台（二）从零开始，搭建一个... 查看详情
三个小时vue3.x从零到实战（typescript的搭建使用及资料）(代码片段)
目录：三个小时vue3.x从零到实战（前）（vue3.x基础）三个小时vue3.x从零到实战（中）（vue3.x高级语法）三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）三个小时vue3... 查看详情
从零开始搭建系统2.1——nexus安装及配置(代码片段)
从零开始搭建系统2.1——Nexus安装及配置 查看详情
从零开始搭建系统2.4——jenkins安装及配置(代码片段)
从零开始搭建系统2.4——Jenkins安装及配置 查看详情
webpack简单教程--从零开始搭建一个webpack小例子
基于Windows操作系统下搭建webpack的运行环境，这里采用npm环境，node.js官网下载最新版本的，这里忽略下载和安装，然后直接运行 Node环境，如下图所示。 检查一下，node版本和npm工具的版本确保是最新的，这里并不是最新... 查看详情
从零开始写博客系统——环境搭建(代码片段)
环境相关内容关于Python的安装，环境变量等配置这里就不单独出文章了，网上有大量的文章可以参考。我使用的Mac电脑，使用Windows也是同样可以的。只不过某些配置可能略有差异。$python3-VPython3.6.6我的Python版本如上&#... 查看详情
从零开始搭建solo个人博客系统(代码片段)
目录1.博客系统的搭建流程2.服务器选购2.1阿里云学生主机2.2普通云主机3.域名购买与备案（可选）3.1域名购买3.2域名服务器备案3.3域名服务器解析4.solo安装4.1本地试用5.安装nginx（可选）6.配置ssl证书（可选）6.1证书选购6.2配置ngi... 查看详情
从零开始搭建创业公司后台技术栈
点击上方“朱小厮的博客”，选择“设为星标”后台回复"书"，获取后台回复“k8s”，可领取k8s资料- 前言 -说到后台技术栈，脑海中是不是浮现的是这样一幅图？图1有点眼晕，以下只是我们会... 查看详情
从零开始写博客系统——权限校验(代码片段)
背景如果读者按照前面的文章认真的从头到尾码了代码并且能正常运行，那么其实已经是一个简易的博客系统了，但是这个简易的博客系统还有最后一个问题，那就是我们的新增，修改接口是不能被人随便调用的，否则别人任意... 查看详情
从零搭建java后台管理系统mysql和redis安装
接上篇开始安装mysql和redis注意了，如果用阿里云服务器，外网访问的端口必须在安全组开启，否则外网访问不通三、服务器安装redis和mysql本次环境搭建将所有第三方服务会安装在阿里云服务器上jdk使用java8，对jdk的安装就不做... 查看详情
带你从零开始，开发一个阅读站第四章，后台框架搭建
首先，万分抱歉，据上一篇更新后，时隔已近一个月。虽然博主不日念起此事，但实在是最近繁事缠身，说这些也是想告诉对此文有所期待的朋友，博主一定会更完到最后一章，不尽人意之处，还请各位多担待。如果不出意外，... 查看详情
从零到一开发博客后台管理系统(代码片段)
从零到一开发博客后台管理系统1.今日计划完成home页顶栏设计home页tab标签页与左侧导航栏动态菜单联动axios的封装2.home页顶栏设计只是用于显示标题，看起来干净一些我们来编辑top.vue<template><div><spanclass="title"&... 查看详情
从零开始搭建公司后台技术栈，这套架构绝了...(代码片段)
相关阅读：深圳一普通中学老师工资单曝光，秒杀程序员，网友：敢问是哪个学校毕业的？来源：ju.outofmemory.cn/entry/351897有点眼晕，以下只是我们会用到的一些语言的合集，而且只是语言层面的一... 查看详情
树莓派opencv-python环境搭建最全教程(从零开始)(代码片段)
文章目录需要用到的工具系统烧录系统无线联网以及基础连接配置SSH连接系统配置更新软件源需要用到的工具Rufusnotepad++vncviewerMobaXterm系统烧录首先需要烧录系统打开工具rufus-3.9p.exe然后选择烧录的系统进行烧录系统无线联... 查看详情
vue3.x从零开始——router+vuex+typescript实战演练（上）(代码片段)
...先通过Vue-CLI创建一个Vue3项目，详细流程可以参考《Vue3.x从零开始（一）》vuecreatetest-vue3-demo勾选TypeScript、Router、Vue 查看详情
从零开始搭建自己的个人网站(代码片段)
网站是什么?网站的定义网站是什么?可能大部分人头脑中出现的第一映像就是淘宝啊、京东啊、网易，但若要问对于网站的定义，很多人却答不出来，百度百科是这样定义网站的：网站(Website)是指在因特网上根据一定的规则，使... 查看详情