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

GalaxyZero
1,856 阅读2分钟

前言

上一节是各种安装，本节是基础配置和创建页面。

构建基础页面

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

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

2.引入需要用到的ant-design-vue 组件

// config/components_use.js
import Vue from 'vue'
import { Layout } from 'ant-design-vue'
Vue.use(Layout)

// main.js 下增加
import './config/components_use'

3.创建基础布局容器

直接使用现成的 布局

// layout/BasicLayout.vue
<a-layout-content
    :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
>
    // 记得加上路由组件
    <router-view />
</a-layout-content>

4.修改路由配置

// router/router
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

5.运行项目, 查看效果


菜单和路由配置

有了骨架就可以写内容了，接下来多写几个页面。

// views/A.vue
<template>
  <div class="">
    <a-button type="primary">A页面</a-button>
  </div>
</template>

// views/B/B1.vue
<template>
  <div class="">
    <a-button type="dashed">B1 页面</a-button>
  </div>
</template>

// views/B/B2.vue
<template>
  <div class="">
    <a-button type="dashed">B2 页面</a-button>
  </div>
</template>

继续修改路由配置

// router/router
children: [
    {
        path: '/index',
        name: 'index',
        hideInMenu: true,
        component: Home
    },
    {
        path: '/a',
        name: 'a',
        component: () => import('./../views/A.vue')
    },
    {
        path: '/b',
        name: 'b',
        redirect: '/b/b1',
        component: { render: (h) => h('router-view') },
        children: [
            {
                path: '/b/b1',
                name: 'b1',
                component: () => import('./../views/B/B1.vue')
            },
            {
                path: '/b/b2',
                name: 'b2',
                component: () => import('./../views/B/B2.vue')
            }
        ]
    }
]

修改 BasicLayout.vue 组件中的菜单

// layout/BasicLayout.vue
<a-menu theme="dark" mode="inline" :defaultSelectedKeys="['1']">
    <a-menu-item key="1">
        <router-link to="/">
            <a-icon type="home" />
            <span>首页</span>
        </router-link>
    </a-menu-item>
    <a-menu-item key="2">
        <router-link to="/a">
            <a-icon type="video-camera" />
            <span>A 页面</span>
        </router-link>
    </a-menu-item>
    <a-sub-menu key="3">
        <span slot="title"><a-icon type="user" />B 级页面</span>
        <a-menu-item key="3-1">
            <router-link to="/b/b1">
                <span>B1 页面</span>
            </router-link>
        </a-menu-item>
        <a-menu-item key="3-2">
            <router-link to="/b/b2">
                <span>B2 页面</span>
            </router-link>
        </a-menu-item>
    </a-sub-menu>
</a-menu>

现在页面应该是这样的，点击首页、A、B页面都可以跳转了


项目文件夹

|-- manage
    |-- .browserslistrc
    |-- .editorconfig
    |-- .eslintrc.js
    |-- .gitignore
    |-- .prettierrc
    |-- babel.config.js
    |-- package.json
    |-- README.md
    |-- vue.config.js
    |-- yarn.lock
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src
        |-- App.vue
        |-- main.js
        |-- api
        |-- assets
        |   |-- logo.png
        |-- components
        |   |-- HelloWorld.vue
        |-- config
        |   |-- components_use.js
        |-- layout
        |   |-- BasicLayout.vue
        |-- router
        |   |-- router.js
        |-- store
        |   |-- store.js
        |-- utils
        |-- views
            |-- Home.vue
            |-- A.vue
            |-- B
                |-- B1.vue
                |-- B2.vue

仓库地址


avatar
文章
阅读
粉丝