Vue3后台管理系统的搭建与实现 看这篇就够了！

相信很多vue3初学者第一次搭建自己的项目，搭建时会无从下手，本篇适合快速实现功能，熟悉vue3搭建流程及element plus组件库使用，没有配置eslint，ts等代码规范工具。

目录

一、配置路由

二、element plus组件库的引入和使用

三、axiso的封装

四、递归生成侧边栏

五、头部组件路由跳转（出现和关闭）

六、侧边栏的展示与收缩

七、根据请求数据渲染echart图表

八、日期格式的转换

九、国际化（中英繁三语转化）

---

一、配置路由

本项目分为了两个一级路由，登录页（Login）和后台页面（Dashboard）

后台页面有后台首页，订单管理，商品管理，店铺管理，账号管理，销售统计这六个二级路由。

登录页面 

后台页面

商品管理有三个子路由：商品列表，商品添加，商品分类

账户管理有四个子路由：账号管理，添加账号，修改密码，个人中心

销售统计有两个子路由：商品统计，订单统计

根据以上信息我们如何配置路由呢？

1、安装Vue Router

npm install vue-router@4 --save

2、创建路由配置文件

（1）创建一个路由配置文件

通常是 router/index.js 或 router.js

（2）createRouter 和 createWebHistory 从 vue-router 导入

createWebHistory 是 Vue Router 提供的一种基于浏览器 history API 的路由模式，这种模式可以使得 URL 更加直观，而且不会在 URL 中添加任何特殊字符。例如，我们可以将路由设置为 /home、/about 等等。

（3）动态导入

使用动态导入 (import()) 来懒加载 ProductList、ProductAdd、ProductCategory、AccountList、AccountAdd、ChangePassword、PersonalCenter、ProductStats 和 OrderStats 组件。这样可以提高应用的加载速度，因为这些组件只有在需要时才会被加载。

  (4) 路由元信息

meta属性后期在header组件中会用到，用于点击侧边栏跳转路由携带信息。

import { createRouter, createWebHistory } from "vue-router";
// 一级路由
import Login from "../views/Login.vue";
import Dashboard from "../views/Dashboard.vue";
// 二级路由
import Home from "../views/DashboardChildren/Home.vue";
import OrderManagement from "../views/DashboardChildren/OrderManagement.vue";
import ShopManagement from "../views/DashboardChildren/ShopManagement.vue";
// 商品管理子路由
const ProductList = () =>
  import(
    "../views/DashboardChildren/ProductManagementChildren/ProductList.vue"
  );
const ProductAdd = () =>
  import("../views/DashboardChildren/ProductManagementChildren/ProductAdd.vue");
const ProductCategory = () =>
  import(
    "../views/DashboardChildren/ProductManagementChildren/ProductCategory.vue"
  );

// 账号管理子路由
const AccountList = () =>
  import(
    "../views/DashboardChildren/AccountManagementChildren/AccountList.vue"
  );
const AccountAdd = () =>
  import("../views/DashboardChildren/AccountManagementChildren/AccountAdd.vue");
const ChangePassword = () =>
  import(
    "../views/DashboardChildren/AccountManagementChildren/ChangePassword.vue"
  );
const PersonalCenter = () =>
  import(
    "../views/DashboardChildren/AccountManagementChildren/PersonalCenter.vue"
  );

// 销售统计子路由
const ProductStats = () =>
  import("../views/DashboardChildren/SalesStatisticsChildren/ProductStats.vue");
const OrderStats = () =>
  import("../views/DashboardChildren/SalesStatisticsChildren/OrderStats.vue");

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "",
      redirect: "/login",
    },
    {
      path: "/login",
      name: "Login",
      component: Login,
    },
    {
      path: "/dashboard",
      name: "Dashboard",
      component: Dashboard,
      children: [
        {
          path: "home",
          name: "Home",
          component: Home,
          meta: {
            id: "1",
            name: "后台首页",
            icon: "Menu",
            path: "/dashboard/home",
          },
        },
        {
          path: "order",
          name: "OrderManagement",
          component: OrderManagement,
          meta: {
            id: "2",
            name: "订单管理",
            icon: "List",
            path: "/dashboard/order",
          },
        },
        {
          path: "product",
          name: "ProductManagement",
          meta: {
            id: "3",
            name: "商品管理",
            icon: "ShoppingCartFull",
            path: "/dashboard/product",
          },
          children: [
            {
              path: "list",
              name: "ProductList",
              component: ProductList,
              meta: {
                id: "1",
                name: "商品列表",
                icon: "List",
                path: "/dashboard/product/list",
              },
            },
            {
              path: "add",
              name: "ProductAdd",
              component: ProductAdd,
              meta: {
                id: "2",
                name: "商品添加",
                icon: "Plus",
                path: "/dashboard/product/add",
              },
            },
            {
              path: "category",
              name: "ProductCategory",
              component: ProductCategory,
              meta: {
                id: "3",
                name: "商品分类",
                icon: "Files",
                path: "/dashboard/product/category",
              },
            },
          ],
        },
        {
          path: "shop",
          name: "ShopManagement",
          component: ShopManagement,
          meta: {
            i