chore: update document for layout :dog:

iczer

2020-06-30 18c08f368218bb82ab907270dcd4f8d0f3916bdc

chore: update document for layout :dog:

 docs/.vuepress/config.js

@@ -10,6 +10,7 @@
    repo: 'iczer/vue-antd-admin',
    docsDir: 'docs',
    editLinks: true,
    smoothScroll: true,
    nav: [
      {text: '指南', link: '/'},
      {text: '配置', link: '/develop/'},
@@ -48,5 +49,9 @@
    ],
    nextLinks: true,
    prevLinks: true,
  },
  plugins: ['@vuepress/back-to-top'],
  markdown: {
    lineNumbers: true
  }
}

 docs/.vuepress/public/tabs-view.png

Binary files differ

 docs/.vuepress/styles/palette.styl

@@ -1 +1,2 @@
$accentColor = #1890ff
$contentWidth = 940px

 docs/assets/admin-layout.png

 docs/assets/blank-view.png

 docs/assets/common-layout.png

 docs/assets/page-layout.png

 docs/assets/page-view.png

 docs/assets/tabs-view.png

 docs/develop/layout.md

@@ -5,38 +5,32 @@
# 布局
页面整体布局是一个产品最外层的框架结构，往往会包含导航、页脚、侧边栏、通知栏以及内容等。在页面之中，也有很多区块的布局结构。在真实项目中，页面布局通常统领整个应用的界面，有非常重要的作用。

## Vue Antd Admin 的布局
## Admin 的布局
在 Vue Antd Admin 中，我们抽离了使用过程中一些常用的布局，都放在 layouts 目录中，分别为：
* [AdminLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/AdminLayout.vue) / **管理后台布局**，包含了头部导航，侧边导航、内容区和页脚，一般用于后台系统的整体布局

<img :src="$withBase('/admin-layout.png')" alt="admin-layout">
![admin-layout](../assets/admin-layout.png)
* [PageLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue) / **页面布局**，包含了页头和内容区，常用于需要页头（包含面包屑、标题、额外操作等）的页面

* [PageLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageLayout.vue) / **页面布局**，包含了页头和内容区，常用于需要页头(一般包含面包屑、标题、额外操作等)的页面
![page-layout](../assets/page-layout.png)
* [CommonLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/CommonLayout.vue) / **通用布局**，仅包含内容区和页脚的简单布局，项目中常用于注册、登录或展示页面

<img :src="$withBase('/page-layout.png')" alt="page-layout">

* [CommonLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/CommonLayout.vue) / **通用布局**，仅包含页脚的简单布局，项目中常用于注册、登录或展示页面

<img :src="$withBase('/common-layout.png')" alt="common-layout">

## Vue Antd Admin 的视图
![common-layout](../assets/common-layout.png)
## Admin 的视图
在 Vue Antd Admin 中，除了基本布局外，通常有很多页面的结构是相似的。因此，我们把这部分结构抽离为视图组件。  
一个视图组件通常包含一个基本布局组件、视图公共区块、路由视图内容区、页脚等，常常结合路由配置使用。它们也被放入了 layouts 目录中，分别为：
* [TabsView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/TabsView.vue) / **多页签视图**，包含了 AdminLayout 布局、多页签头和路由视图内容区

<img :src="$withBase('/tabs-view.png')" alt="tabs-view">

![tabs-view](../assets/tabs-view.png)
* [PageView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue) / **页面视图**，包含了 PageLayout 布局和路由视图内容区

<img :src="$withBase('/page-view.png')" alt="page-view">

![page-view](../assets/page-view.png)
* [BlankView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/BlankView.vue) / **空白视图**，仅包含一个路由视图内容区

<img :src="$withBase('/blank-view.png')" alt="blank-view">

![blank-view](../assets/blank-view.png)
## 如何使用
通常我们会把视图组件和路由配置结合一起使用，我们把配置信息抽离在路由配置文件中 [router/index.js](https://github.com/iczer/vue-antd-admin/blob/master/src/router/index.js) 。如下：
```jsx
```jsx{7,12}
{
  path: 'form',
  name: '表单页',
@@ -55,7 +49,7 @@
```
当然，如果这满足不了你的需求，你也可以自定义一些视图组件，或者直接在页面组件中使用布局。参考
[workplace](https://github.com/iczer/vue-antd-admin/blob/master/src/pages/dashboard/workplace/WorkPlace.vue) 页面:
```vue
```vue{2,13}
<template>
  <page-layout :avatar="currUser.avatar">
    <div slot="headerContent">
@@ -71,7 +65,7 @@
  </page-layout>
</template>
```
## Ant Design Vue 布局组件
## 其它布局组件
除了 Admin 里的内建布局以外，在一些页面中需要进行布局，还可以使用 Ant Design Vue 提供的布局组件：Grid 和 Layout。
### Grid 组件
栅格布局是网页中最常用的布局，其特点就是按照一定比例划分页面，能够随着屏幕的变化依旧保持比例，从而具有弹性布局的特点。  

 package.json

@@ -36,6 +36,7 @@
    "@vue/cli-plugin-babel": "^4.4.0",
    "@vue/cli-plugin-eslint": "^4.4.0",
    "@vue/cli-service": "^4.4.0",
    "@vuepress/plugin-back-to-top": "^1.5.2",
    "babel-eslint": "^10.1.0",
    "babel-polyfill": "^6.26.0",
    "deepmerge": "^4.2.2",

 yarn.lock

@@ -1549,6 +1549,13 @@
  dependencies:
    lodash.debounce "^4.0.8"

"@vuepress/plugin-back-to-top@^1.5.2":
  version "1.5.2"
  resolved "https://registry.npm.taobao.org/@vuepress/plugin-back-to-top/download/@vuepress/plugin-back-to-top-1.5.2.tgz#d253be7f0b7c2b59ca8fabe10c2f517c96d83b0e"
  integrity sha1-0lO+fwt8K1nKj6vhDC9RfJbYOw4=
  dependencies:
    lodash.debounce "^4.0.8"

"@vuepress/plugin-last-updated@1.5.2":
  version "1.5.2"
  resolved "https://registry.npm.taobao.org/@vuepress/plugin-last-updated/download/@vuepress/plugin-last-updated-1.5.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vuepress%2Fplugin-last-updated%2Fdownload%2F%40vuepress%2Fplugin-last-updated-1.5.2.tgz#daa2250edb40700e1fa0942561057b6aa00e4103"