怎么使用vue3搭建后台系统

之后在src下新建layout文件夹并新建index.vue文件，配置如下：

整个el-container为layout布局的整体，其下又可以按照布局的不同划分出不同的区块，但总结起来可以划分为：1、侧边菜单栏；2、头部区；3、内容展示区；4、尾部区，我们根据自己的需要进行选择组合，这些划分出来的区块涉及到不同的配置和处理，因此，我们可以将这些大的区块从layout整体布局中抽离成组件，让代码拥有更好的可读性；此外，每个抽离的组件自己本身也可能存在需要拆分的问题。我们通过拆分，可以很好的将一个问题化繁为简，从而很轻松的解决。

 

// vue3中组件引入后不需要使用conponents注册，可以直接使用
import Header from '@/layout/header/Header.vue'
import Menu from '@/layout/menu/Menu.vue'
 

 

.container {
  height: 100%;
  .aside {
    background-color: antiquewhite;
  }
  .header {
    background-color: aquamarine;
  }
  .content {
    background-color: pink
  }
}

从layout布局抽离的菜单栏组件：

 

import { ref, reactive } from "vue";
import MenuItem from "@/layout/menu/item/MenuItem.vue";
 
// 自定义的假的树形菜单数据
// reactive函数用来处理响应式数据，处理的数据一般是复杂类型数据，如对象类型
// ref函数也可以处理响应式数据，不过数据一般是基本数据类型
const isCollapse = ref(false)
const uniqueOpenedFlag = ref(true)
 
 
const menuList = reactive([
  {
    path: "/system",
    name: "system",
    component: "Layout",
    meta: {
      title: "系统管理",
      icon: "Setting",
      roles: ["sys:manage"],
    },
    children: [
      {
        path: "/worker",
        name: "worker",
        component: "Layout",
        meta: {
          title: "员工管理",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
      {
        path: "/happy",
        name: "happy",
        component: "Layout",
        meta: {
          title: "菜单管理",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
    ],
  },
  {
    path: "/mail",
    name: "mail",
    component: "Layout",
    meta: {
      title: "商场管理",
      icon: "Setting",
      roles: ["sys:manage"],
    },
    children: [
      {
        path: "/worker11",
        name: "worker11",
        component: "Layout",
        meta: {
          title: "员工管理22",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
      {
        path: "/happy22",
        name: "happy22",
        component: "Layout",
        meta: {
          title: "菜单管理22",
          icon: "Setting",
          roles: ["sys:manage"],
        },
      },
    ],
  },
]);
 

 

从菜单栏抽离的菜单项组件：

      
      
    
    
      
        
        
      
      {{ item.meta.title }}
    
  

 

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
 
// 子组件接受父组件传递的数据
// 本组件为子组件，接受父组件传过来的数据，此处定义menuList属性，接受父组件传递的menuList数据
defineProps(["menuList"]);

 

六、菜单栏logo

首先，将自己准备的logo图片放到src下的assets文件夹下，然后在layout的menu的logo文件夹下新建Menuhttps://img.zhengruan.com/Logo.vue文件，并配置如下：

 

import { ref } from "vue";
import https://img.zhengruan.com/Logo from "@/assets/logo.png";
const title = ref("博客管理系统");

 

.logo {
  display: flex; // 弹性布局
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: rgb(234, 255, 127);
  text-align: center;
  cursor: pointer; // 鼠标悬浮在元素上时，鼠标从箭头变成小手
  align-items: center;
  img {
    width: 36px;
    height: 36px;
    margin-left: 20px; // 元素的外边距
    margin-right: 12px;
  }
  .logo-title {
    font-weight: 800; // 800为加粗
    color: black;
    font-size: 20px;
    line-height: 60px; // 元素上下居中
    font-family: FangSong; // 字体类型
  }
}

最后在菜单栏组件中引入菜单logo组件并使用

// 在script标签中引入
import Menuhttps://img.zhengruan.com/Logo from "@/layout/menu/logo/Menuhttps://img.zhengruan.com/Logo.vue";
 
// el-menu标签上方引入使用

效果如下：

七、路由和页面联动

在src的router的index.ts文件下添加如下路由配置并在views文件夹下创建对应的文件

{
    path: "/",
    component: Layout,      // 每个路由都需要通过component指定归属的布局组件
    redirect: "/index",
    name: "Root",
    children: [
      {
        path: "/index",
        name: "Index",
        component: () => import("@/views/index/index.vue"),
        meta: {
          title: "首页看板",
          icon: "icon-home",
          affix: true,
          noKeepAlive: true,
        },
      },
    ],
  },
  {
    path: "/comp",
    component: Layout,
    name: "Comp",
    meta: { title: "系统管理", icon: "icon-code" },
    children: [
      {
        path: "/element",
        name: "ElementComp",
        component: () => import("@/views/element/index.vue"),
        meta: {
          title: "菜单管理",
          icon: "icon-code",
        },
      },
      {
        path: "/iconPark",
        name: "IconPark",
        component: () => import("@/views/icon/index.vue"),
        meta: {
          title: "路由管理",
          icon: "icon-like",
        },
      },
      {
        path: "/chart",
        name: "Chart",
        component: () => import("@/views/echarts/index.vue"),
        meta: {
          title: "员工管理",
          icon: "icon-chart-line",
        },
        children: [
          {
            path: "/line",
            name: "Line",
            component: () => import("@/views/echarts/line.vue"),
            meta: {
              title: "商品管理",
            },
          },
          {
            path: "/bar",
            name: "Bar",
            component: () => import("@/views/echarts/bar.vue"),
            meta: {
              title: "手机管理",
            },
          },
          {
            path: "/otherChart",
            name: "OtherChart",
            component: () => import("@/views/echarts/other.vue"),
            meta: {
              title: "会员管理",
            },
          },
        ],
      },
    ],
  },
  {
    path: "/errorPage",
    name: "ErrorPage",
    component: Layout,
    meta: {
      title: "用户管理",
      icon: "icon-link-cloud-faild",
    },
    children: [
      {
        path: "/404Page",
        name: "404Page",
        component: () => import("@/views/errorPage/404.vue"),
        meta: {
          title: "角色管理",
          icon: "icon-link-cloud-faild",
        },
      },
      {
        path: "/401Page",
        name: "401Page",
        component: () => import("@/views/errorPage/401.vue"),
        meta: {
          title: "权限管理",
          icon: "icon-link-interrupt",
        },
      },
    ],
  },

添加完路由配置之后，创建路由的对应文件并添加一些描述文字，此时虽然路由和对应的页面都已经创建完毕并关联在了一起，但路由并没有被引用，也就无法在正确的位置展示路由页面的数据，所以，我们需要将路由引用到layout布局的main区域，也就是数据展示区，确保当我们访问某个路由时，对应的路由页面能够在该区域展示。

1、路由和页面联动的注意细节

在菜单项组件中，我们给菜单项的index属性绑定了路由的path值，其用意是为了启用element-plus中提供的一种在激活导菜单时（当我们点击某个菜单项时，该菜单项就是被激活的菜单）以index作为path进行路由跳转，所以为了我使用这个功能，我们还需要在菜单栏组件的el-menu标签中添加 router 属性以开启该功能，同时再添加 default-active 属性来指明当前被激活的菜单。用例如下

 
import { useRouter, useRoute } from "vue-router";
 
// 获取当前点击的路由
const route = useRoute();
// 从路由中获取path
const activeIndex = computed(() => {
  const { path } = route;
  return path;
});