一步步创建vue-element-admin框架实现006-个性化布局设置

使用说明：

一步步创建vue-element-admin框架是基于vue-element-admin和vue-admin-template基础版的代码来实现的，文章会经常说直接拷贝项目的文件

个性化布局设置：缩进菜单、展示sidebar系统Logo、固定navbar头

一、设置展示sidebar系统Logo、固定navbar头

1)新增文件：src\settings.js

直接拷贝vue-admin-template的：src\settings.js文件

2）配置浏览器窗口标题

修改文件：src\utils\get-page-title.js

3）配置store管理器，为了以后可以动态修改

新增文件src\store\modules\settings.js，直接拷贝vue-admin-template的src\store\modules\settings.js文件

在src\store\index.js配置settings.js文件

4）layout配置使用

在src\layout\index.vue配置

在src\layout\components\Sidebar\index.vue配置

在src\layout\components\Sidebar\Logo.vue配置

二、设置缩进菜单

1)新增文件：src\store\modules\app.js

新增文件src\store\modules\app.js，直接拷贝vue-admin-template的src\store\modules\app.js文件

2）配置store状态管理：

配置src\store\index.js

3）layout配置使用

新增文件src\layout\mixin\ResizeHandler.js，直接拷贝vue-admin-template的src\layout\mixin\ResizeHandler.js文件

配置src\layout\index.vue

配置src\layout\components\Navbar.vue

配置src\layout\components\Sidebar\index.vue

配置src\layout\components\Sidebar\Logo.vue