Vue3 从零开始 搭建 简单 干净 的 后台管理系统

前言：

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

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

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

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

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

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

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

https://gitee.com/tyx_0/open-back-managehttps://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 vue

2. 导入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组件搭建结构

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

具体代码如下

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

具体在Element-plus里面，如下图

我做出来的效果图如下

思路：

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

//左侧菜单选项配置

      asideMenu: [

        {

          title: "用户",

          index: "user",

        },

        {

          title: "文章",

          subs: [

            {

              title: "文章列表",

              index: "articleList",

            },

          ],

        },

        {

          title: "测试",

          index: "test",

        },

 ]

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

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

     
      
        
VUE-ADMIN
        
          
        
      

5.  main里面放标签页

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

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

详细的看完整的代码吧