Vue+Ant Design 搭建后台管理系统

前言

省去node、cli等安装步骤，直接创建好项目，运行起来，效果如下：

构建基础页面

修改APP.vue文件, <router-view />是路由渲染组件

xml 复制代码

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style lang="scss">

</style>

全局引入的ant-design-vue 组件（也可以按需引入，根据自己的情况）

javascript 复制代码

// config/components_use.js 
import Vue from 'vue'
import antDesign from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(antDesign)

创建基础布局容器

ini 复制代码

// layout/BasicLayout.vue
<a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <div class="logo" />
        <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
          <a-menu-item key="1">
            <a-icon type="user" />
            <span>nav 1</span>
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="video-camera" />
            <span>nav 2</span>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="upload" />
            <span>nav 3</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
        </a-layout-header>
        <a-layout-content
          :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
        >
            <router-view/>
        </a-layout-content>
      </a-layout>
    </a-layout>

修改路由文件

javascript 复制代码

// router/index
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import BasicLayout from './../layout/BasicLayout.vue'
Vue.use(Router)

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: BasicLayout,
      redirect: '/index',
      children: [
        {
          path: '/index',
          name: 'index',
          hideInMenu: true,
          component: Home
        }
      ]
    }
  ]
})
export default router

效果如下：

菜单和路由配置

新建页面，并配置路由如下：

修改BasicLayout.vue

xml 复制代码

<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
        <template v-for="item in navs">
          <!-- 一级 -->
          <a-menu-item :key="item.name" v-if="!item.children">
            <router-link :to="item.path">
              <a-icon type="user" />
              <span>{{ item.meta.title }}</span>
            </router-link>
          </a-menu-item>
          <!-- 多级 -->
          <a-sub-menu :key="item.name" @titleClick="titleClick" v-else>
            <span slot="title">
              <a-icon type="appstore" /><span>{{ item.meta.title }}</span>
            </span>
            <template v-for="item2 in item.children">
              <a-menu-item :key="item2.name">
                <router-link :to="item2.path">
                  <a-icon type="user" />
                  <span>{{ item.meta.title }}</span>
                </router-link>
              </a-menu-item>
            </template>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)" />
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
        }">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      navs: [],
    }
  },
  created() {
    // 获取全部路由
    this.navs = this.$router.options.routes[0]?.children
    console.log('this.navs----', this.navs)
  },
  methods: {
    titleClick(e) {
      console.log('titleClick', e)
    },
  },
}
</script>
<style>
#components-layout-demo-custom-trigger {
  height: 100%;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>