diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index a08af80..b5c60e3 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -10,6 +10,7 @@ module.exports = { repo: 'iczer/vue-antd-admin', docsDir: 'docs', editLinks: true, + smoothScroll: true, nav: [ {text: '指南', link: '/'}, {text: '配置', link: '/develop/'}, @@ -48,5 +49,9 @@ module.exports = { ], nextLinks: true, prevLinks: true, + }, + plugins: ['@vuepress/back-to-top'], + markdown: { + lineNumbers: true } } diff --git a/docs/.vuepress/public/tabs-view.png b/docs/.vuepress/public/tabs-view.png deleted file mode 100644 index 73ab16c..0000000 Binary files a/docs/.vuepress/public/tabs-view.png and /dev/null differ diff --git a/docs/.vuepress/styles/palette.styl b/docs/.vuepress/styles/palette.styl index 822a695..02c2539 100644 --- a/docs/.vuepress/styles/palette.styl +++ b/docs/.vuepress/styles/palette.styl @@ -1 +1,2 @@ $accentColor = #1890ff +$contentWidth = 940px diff --git a/docs/.vuepress/public/admin-layout.png b/docs/assets/admin-layout.png similarity index 100% rename from docs/.vuepress/public/admin-layout.png rename to docs/assets/admin-layout.png diff --git a/docs/.vuepress/public/blank-view.png b/docs/assets/blank-view.png similarity index 100% rename from docs/.vuepress/public/blank-view.png rename to docs/assets/blank-view.png diff --git a/docs/.vuepress/public/common-layout.png b/docs/assets/common-layout.png similarity index 100% rename from docs/.vuepress/public/common-layout.png rename to docs/assets/common-layout.png diff --git a/docs/.vuepress/public/page-layout.png b/docs/assets/page-layout.png similarity index 100% rename from docs/.vuepress/public/page-layout.png rename to docs/assets/page-layout.png diff --git a/docs/.vuepress/public/page-view.png b/docs/assets/page-view.png similarity index 100% rename from docs/.vuepress/public/page-view.png rename to docs/assets/page-view.png diff --git a/docs/assets/tabs-view.png b/docs/assets/tabs-view.png new file mode 100644 index 0000000..a209547 Binary files /dev/null and b/docs/assets/tabs-view.png differ diff --git a/docs/develop/layout.md b/docs/develop/layout.md index 6cb1372..1836ebd 100644 --- a/docs/develop/layout.md +++ b/docs/develop/layout.md @@ -5,38 +5,32 @@ lang: zh-CN # 布局 页面整体布局是一个产品最外层的框架结构,往往会包含导航、页脚、侧边栏、通知栏以及内容等。在页面之中,也有很多区块的布局结构。在真实项目中,页面布局通常统领整个应用的界面,有非常重要的作用。 -## Vue Antd Admin 的布局 +## Admin 的布局 在 Vue Antd Admin 中,我们抽离了使用过程中一些常用的布局,都放在 layouts 目录中,分别为: * [AdminLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/AdminLayout.vue) / **管理后台布局**,包含了头部导航,侧边导航、内容区和页脚,一般用于后台系统的整体布局 -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) / **通用布局**,仅包含内容区和页脚的简单布局,项目中常用于注册、登录或展示页面 -page-layout - -* [CommonLayout](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/CommonLayout.vue) / **通用布局**,仅包含页脚的简单布局,项目中常用于注册、登录或展示页面 - -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 布局、多页签头和路由视图内容区 -tabs-view - +![tabs-view](../assets/tabs-view.png) * [PageView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/PageView.vue) / **页面视图**,包含了 PageLayout 布局和路由视图内容区 -page-view - +![page-view](../assets/page-view.png) * [BlankView](https://github.com/iczer/vue-antd-admin/blob/master/src/layouts/BlankView.vue) / **空白视图**,仅包含一个路由视图内容区 -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 @@ lang: zh-CN ``` 当然,如果这满足不了你的需求,你也可以自定义一些视图组件,或者直接在页面组件中使用布局。参考 [workplace](https://github.com/iczer/vue-antd-admin/blob/master/src/pages/dashboard/workplace/WorkPlace.vue) 页面: -```vue +```vue{2,13} ``` -## Ant Design Vue 布局组件 +## 其它布局组件 除了 Admin 里的内建布局以外,在一些页面中需要进行布局,还可以使用 Ant Design Vue 提供的布局组件:Grid 和 Layout。 ### Grid 组件 栅格布局是网页中最常用的布局,其特点就是按照一定比例划分页面,能够随着屏幕的变化依旧保持比例,从而具有弹性布局的特点。 diff --git a/package.json b/package.json index 18238f9..426efd9 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index cea2fce..1295b1f 100644 --- a/yarn.lock +++ b/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"