原文地址：简洁后台管理模版
之前给客户开发一个简单的后台管理系统，本来准备套用AdminLTE的，但客户嫌弃太臃肿，而且又需要有多tab页面切换，于是从我代码库中找到好久前就写过的管理后台，根据需求重写。这是基于jQuery，加上自己编写基础样式，从零搭建起来的框架，在这个轻量级模版的基础上进行开发vue项目。现在顺便将这个模版搭建成我的前端demo的管理系统，而这篇文章就讲述下如何实现简单的后台管理系统。
效果请看：manage-demo:
基于gulp自动化工具，使用less预编译，使用swig模版引擎编译html。
基础样式base.css，字体库raleway，图标库fontello，js基础库jQuery。
同时使用webpack为vue.js配置好开发环境，在src文件夹里面可以直接开发vue项目，里面有简单的vue样例。当然想用react的也可以更改为react库。
文件目录dist 文件生成目录
src 源文件目录，里面为vue项目的文件
img 图片文件夹
lib 类库文件夹
less less文件
pages 页面文件夹
index.html 首页(母板页)
gulpfile.js
webpack.config.js
package.json
而我们现在要做的就是最外层的框架页，也就是母板页，为了使其更加轻便，同时适应更多类型的项目，只使用了最基础的jquery来实现功能。
基础样式库每个前端开发者做过大量项目后，基本都会有自己的样式库吧。我的base-css是参考了部分bootstrap和pure的样式库，精简了很多组件，非常的轻量级。详细代码请看https://github.com/edwardzhong/base-csss，less预编译，gulp自动化，可以自由选择所需要的组件后再打包，经过这样定制打包后的样式体积就更加的小了。该样式库主要包括如下组件：
normalize：html5标签修复
grid：响应式网格
alert
button
breadcrumb
dialog
form
menu
pager
pagination
panel
tab
table
有了基础样式之后，我们搭建系统就方便很多了。
实现母板页后台管理系统最重要的就是母板页(index.html)，我们一步步来实现它。
布局基本就是左右布局：左边导航部分固定宽度，右边内容部分宽度自适应。实现这个布局有很多种方式，这里不详叙，从实现动画和自适应方面考虑，我采用的是绝对定位的方式。左边的导航栏隐藏显示动画是通过设置margin-left和transition属性实现的。
/*左边导航栏*/ .menu-wrap { position: absolute; transition: margin-left .3s ease-in-out; top: 50px; left: 0; width: 200px; height: calc(100% - 50px); overflow-y: scroll; } /*右边内容部分*/ .main { height: calc(100% - 50px); overflow: hidden; margin-left: 200px; transition: margin-left .3s ease-in-out; }