惊艳亮相！Vue3+Ant Design Vue搭建后台管理Layout布局惊艳亮相！

2023-01-24 01:51:52

使用Vue3和Ant Design Vue构建令人惊叹的后台管理Layout布局

搭建Layout布局的基本结构

在开始使用Ant Design Vue组件之前，我们首先需要搭建Layout布局的基本结构。这包括定义Layout组件及其子组件（侧边栏、头部和主体）。

// layout/index.vue
<template>
  <div class="layout">
    <Sidebar />
    <Header />
    <main class="main">
      <router-view />
    </main>
  </div>
</template>

添加侧边栏组件

侧边栏通常包含导航链接和其他用于管理系统的常用工具。可以使用Ant Design Vue的Menu组件来创建侧边栏。

// layout/Sidebar.vue
<template>
  <div class="sidebar">
    <Menu
      mode="inline"
      defaultSelectedKeys={['1']}
    >
      <MenuItem key="1">Dashboard</MenuItem>
      <MenuItem key="2">Users</MenuItem>
      <MenuItem key="3">Products</MenuItem>
      <MenuItem key="4">Orders</MenuItem>
      <MenuItem key="5">Settings</MenuItem>
    </Menu>
  </div>
</template>

添加头部组件

头部通常包含品牌标识、导航链接和用户菜单。使用Dropdown和Button组件可以创建用户菜单，Icon组件可以添加图标。

// layout/Header.vue
<template>
  <div class="header">
    <div class="logo">My Logo</div>
    <div class="nav">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
    <div class="user">
      <Dropdown trigger="click">
        <Button type="text">
          欢迎，{{ username }}
          <Icon type="down" />
        </Button>
        <Menu>
          <MenuItem key="1">个人资料</MenuItem>
          <MenuItem key="2">设置</MenuItem>
          <MenuItem key="3">退出</MenuItem>
        </Menu>
      </Dropdown>
    </div>
  </div>
</template>

集成Ant Design Vue组件

现在，我们已经建立了Layout布局的基本结构，我们可以使用Ant Design Vue组件来增强其视觉效果和交互性。通过替换侧边栏的<ul>元素、头部中的用户名和退出按钮，可以实现更现代的外观和感觉。

// layout/Sidebar.vue (使用Menu组件)
<template>
  <div class="sidebar">
    <Menu
      mode="inline"
      defaultSelectedKeys={['1']}
    >
      <MenuItem key="1">Dashboard</MenuItem>
      <MenuItem key="2">Users</MenuItem>
      <MenuItem key="3">Products</MenuItem>
      <MenuItem key="4">Orders</MenuItem>
      <MenuItem key="5">Settings</MenuItem>
    </Menu>
  </div>
</template>

// layout/Header.vue (使用Dropdown和Button组件)
<template>
  <div class="header">
    <div class="logo">My Logo</div>
    <div class="nav">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </div>
    <div class="user">
      <Dropdown trigger="click">
        <Button type="text">
          欢迎，{{ username }}
          <Icon type="down" />
        </Button>
        <Menu>
          <MenuItem key="1">个人资料</MenuItem>
          <MenuItem key="2">设置</MenuItem>
          <MenuItem key="3">退出</MenuItem>
        </Menu>
      </Dropdown>
    </div>
  </div>
</template>

路由集成

为了将Layout布局集成到路由系统中，我们需要在router/index.js文件中使用Vue Router的<router-view>组件来加载不同的页面组件。

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/Dashboard.vue')
      },
      {
        path: 'users',
        component: () => import('@/views/Users.vue')
      },
      {
        path: 'products',
        component: () => import('@/views/Products.vue')
      },
      {
        path: 'orders',
        component: () => import('@/views/Orders.vue')
      },
      {
        path: 'settings',
        component: () => import('@/views/Settings.vue')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router