Vue Antd Admin v0.7.4

Vue Antd Admin是一个开箱即用的中后台前端/设计解决方案。

功能特点：

简洁

以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。

优雅

享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。

自然

VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。

Admin 的布局

在 Vue Antd Admin 中，我们抽离了使用过程中一些常用的布局，都放在 layouts 目录中，分别为：

AdminLayout / 管理后台布局，包含了头部导航，侧边导航、内容区和页脚，一般用于后台系统的整体布局

PageLayout / 页面布局，包含了页头和内容区，常用于需要页头(包含面包屑、标题、额外操作等)的页面

CommonLayout / 通用布局，仅包含内容区和页脚的简单布局，项目中常用于注册、登录或展示页面

Admin 的视图

在 Vue Antd Admin 中，除了基本布局外，通常有很多页面的结构是相似的。因此，我们把这部分结构抽离为视图组件。

一个视图组件通常包含一个基本布局组件、视图公共区块、路由视图内容区、页脚等，常常结合路由配置使用。它们也被放入了 layouts 目录中，分别为：

TabsView / 多页签视图，包含了 AdminLayout 布局、多页签头和路由视图内容区

PageView / 页面视图，包含了 PageLayout 布局和路由视图内容区

BlankView / 空白视图，仅包含一个路由视图内容区

如何使用

通常我们会把视图组件和路由配置结合一起使用，我们把配置信息抽离在路由配置文件中 src/router/config.js 。如下：

{
  path: 'form',
  name: '表单页',
  meta: {
    icon: 'form',
  },
  component: PageView,
  children: [
    {
      path: 'basic',
      name: '基础表单',
      component: () => import('@/pages/form/basic/BasicForm'),
    }
  ]
}

当然，如果这满足不了你的需求，你也可以自定义一些视图组件，或者直接在页面组件中使用布局。参考 workplace 页面:

<template>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent">
      <div class="title">{{$t('timeFix')}}，{{currUser.name}}，{{$t('welcome')}}</div>
      <div>{{$t('position')}}</div>
    </div>
    <template slot="extra">
      <head-info class="split-right" :title="$t('project')" content="56"/>
      <head-info class="split-right" :title="$t('ranking')" content="8/24"/>
      <head-info class="split-right" :title="$t('visit')" content="2,223"/>
    </template>
    <div>...</div>
  </page-layout>
</template>