前言

如果说有一个自己的服务器是一个后台程序员的浪漫，那么有一个个人的后台管理则是一个前端的浪漫。大大小小的仪表盘，各种丰富多彩的图表，形形色色的表单。每一个男孩子小时候都想着有一个自己的秘密仓库，里面有很多的工具，管理着自己所有的秘密。只是后来长大了，那些小时候的愿望不知道丢到哪里去了。还好作为一个程序员，虽然没有了自己的秘密仓库，但我还是能搭建一个管理后台，管理自己的所有网站。

传统的管理后台使用JQ+iframe的形式制作，这样导致了会有许多html页面，项目的结构复杂，维护起来也不方便。看过了许多JQ的后台管理，总觉得颜色动画有些生硬，色彩搭配等都不太适合我的口味。因此决定搭建一个基于Vue的管理后台，先看看效果图。

CoreUI.gif
在线预览地址

CoreUI

CoreUI是基于vue-admin的一个后台管理模板，完全的前后端分离的SPA应用。理论上来说，通过使用elmentUI完全从0手动搭建一个管理后台，但是对于新手来说，还是建议通过一个现成的模板进行搭建，通过对这个模板的结构熟悉，更有利于自己对管理后台结构的掌握。
CoreUI基于vue-admin，而vue-admin也是基于vue-bootstrap的。所以这个系列的后台模板都是响应式的。管理后台本身没有集成vuex，也没有ajax请求库，因此自己开发的时候需要手动添加。

Get Start

下载项目

该系列支持React Angular Vue，我们选择Vue版本，下载以后会有两个文件夹，其中Ful_Project是完整的演示包，Starter是一个骨架包，本文将从Full_Project去分析管理后台的框架，将在后面的文章中讲解如何实现自己的业务逻辑。

项目结构

项目结构.png

这个是整个的项目结构，一个标准的Vue工程。

目录	内容	需要修改
components	存放制作好的一些通用组件	基本不修改
containers	展示内容的容器，我们自己写的内容在这个容器展示	基本不修改
router	路由页面，建议自己写单独拆分routes	经常修改
views	具体的业务逻辑实现，就是containers展示的内容需要自己写	经常修改
_nav.js	核心的导航，在下面会详细介绍	经常修改

项目页面拆分

页面结构.png

结构区域	内容
1	brand，一个图片，在scss文件中修改 url地址，记得修改size切换大小
2	顶部导航，对应components里面的header，这里面还包含了点击头像的下拉列表
3	页面内部导航，属于containers里面的full，根据当前路由动态生成，名字是route的name属性
4	左侧的核心导航，对应components下sidebar组件，通过_nav.js动态生成
5	头像下拉列表，不是一个单独组件，属于头部导航
6	页面主题，自己要在这里实现要展示的内容，注意，这里包含了3区域的路由名字，以及自带的一个padding属性。自己写的页面是在padding属性之内的内容，当然也可以通过修改默认scss修改padding
7	右侧列表，对应components下的aside组件
8	页面没有标记出来，在6的底部。一个footer组件

_nav.js

_nav.js.png

nav.js导出了一个对象数组，组件通过这个数组对象动态的生成了左侧的选项列表。每一个对象都可以有自己的属性，并且根据属性决定形态。url表示点击后跳转的连接，配合vue-router进行跳转，icon表示要显示的图像，因为是基于bootstrap，默认包含了fontawsome，因此这里可以写fontawsome的名称，接下来我们看看具体的组件怎么实现

组件实现.png

根据前面通过JS导出的导航对象属性，进行判断，是否是titile 分割线 link，显示为不同的形式。

link组件.png

一个link组件内部实际上就是一个router-link，里面i标签展示前面的图标，就相当于平时写fontawsome一样。
这就是我认为整个后台管理模板中核心的部分，动态生成左侧的导航。

样式部分

scss.png

模板使用scss进行样式编译，如果不会用也没有关系，你完全可以在自己的组件中写样式。当然你是一个bootstrap的老手，你完全可以使用类名的方式修改自己的业务组件。当然如果对现有的样式不满意也可以直接在里面修改布局的颜色搭配那些，但最好不要在这里面写和业务相关的样式

总结

以上就把一个基于vue-admin的后台管理模板拆分完了，我也看过一些其他的模板，基本都是大同小异。因此掌握了一个模板的结构再使用其他模板也不是什么难事。当然模板是死的，要做成一个可以使用的后台管理还需要进行数据绑定以及权限控制。比如头像上的红色提示，下拉列表中的消息数目。这些需要配合vuex做全局的数据管理。另外该模板还提供了404 500页面以及注册登录页面都可以直接拿来用。样例中展示的图表和表单都是来自第三方的一些UI库，比如bootstrap和echarts。在实际中，建议大家搭配elementUI或者iview这些框架使用。

本章的内容大致如此，给大家介绍了一下后台模板的基本结构，在接下来的文章中，我会给大家介绍如何编写自己的业务组件，以及进行数据绑定，同时也会涉及到一些vue的基本操作，以及我个人打的vue框架的一些架构设计上的理解

这是我的后台管理项目MrTreasure's Admin, 麻烦大家star一波，多谢
就是这样：）