Vue:（1）从80%搭建个人管理后台

前言

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

传统的管理后台使用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工程。

项目页面拆分

页面结构.png

_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一波， 多谢 就是这样：）