后台管理的模板很多，vue本身就提供了完整的vue-template-admin，vue-admin-beautiful等后台管理系统化框架，但是这些框架正是因为成体系而显得繁重。假如你想搭建一个静态的后台管理模板页面和几个单独的菜单页面，直接就上框架是否就有点大材小用了呢?百分之九十以上的后台管理布局基本都是头部导航，侧边栏，主内容三部分组成。所以，将其单独摘出来为一个单独的轻量后台页面就很有必要了。

1. 效果展示

最常见的系统布局就是：左右布局。左侧是菜单栏，右侧是内容区，内容区又分为头部和展示区。。所以我们的效果显示如下：

?目录结构呢，也很简单，因为不涉及请求，所以就是vue+element+vuex即可

?这种就很适合做vue的静态页面演示开发，因为就只有几个页面，不涉及复杂的路由和权限啥的。

本博文是借鉴了这篇博客写的：vue+elementUi——实现后台管理系统的布局(sideBar+header+appMain)_element ui页面布局模板-CSDN博客

但是由于它的细节问题太多，在调试过程中也遇到了一些问题，所以重新写一篇调试完后的代码，主要的就是方便你我他。

2.关键代码

如果迁入自由的项目，可以复制对应的关键代码，store代码，配置对应的路由，自己调试也可。如果想直接拿来即用的，下面也会附上vue代码git地址。

index.vue 主页面，负责引入头部，侧边栏，主内容组件

Header头部部分：

Sidebar侧边栏部分：

Appmain主内容部分：

Store状态管理js：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state:{
    isCollapse:false,
    menuData:[
            {
                path:'/dream/home',
                meta:{
                    icon:'el-icon-data-line',
                    title:'首页'
                }
            },
      {
                path:'/dream/2',
                meta:{
                    icon:'el-icon-office-building',
                    title:'梦缘'
                }
            },
      {
                path:'/dream/3',
                meta:{
                    icon:'el-icon-place',
                    title:'流情'
                }
            },
      {
                path:'/dream/4',
                meta:{
                    icon:'el-icon-postcard',
                    title:'日志'
                }
            },
      {
                path:'/dream/5',
                meta:{
                    icon:'el-icon-pie-chart',
                    title:'数据'
                },
                children:[
                  {
                    path:'/dream/6',
                    meta:{
                        icon:'el-icon-postcard',
                        title:'数据1'
                    }
                },
                ]   
            }
        ]
  },
  mutations:{
    changeCollapse: (state,isCollapse) => {
        state.isCollapse = isCollapse
    },
    setMenuData(state,menuData){
    state.menuData = menuData;
    }
  },
  actions: {
    // 异步 actions
  },
  getters:{
		menuData(state,rootState){
			if(state.filterMenu){
				const {permissions,roles} = rootState.accout;
				return filterMenu(JSON.parse(JSON.stringfy(state.menuData)),permissions,roles)
			}
			return state.menuData;
		},
		firstMenu(state){
			const {menuData} = state;
			if(menuData.length>0&&!menuData[0].fullPath){
				formatFullPath(menuData);
			}
			return menuData.map(item=>{
				const menuItem = {...item};
				delete menuItem.children;
				return menuItem
			})
		},
		subMenu(state){
			const {menuData,activateFirst} = state;
			if(menuData.length>0&&!menuData[0].fullPath){
				formatFullPath(menuData);
			}
			const current = menuData.find(menu=>menu.fullPath== activatedFirst);
			return current && current.chilren||[]
		}
	},
  modules: {
    // 模块
  }
});

3.示例源码下载

git地址：vue-admin-static: vue+element后台管理极简版：头部和侧边导航栏，固定路由。适合写vue简单的静态演示，不适合做复杂系统开发