ReactAdmin是一个Github上免费开源的前端框架（不是组件库，也不是模板，它是一个框架），采用es6、React和Material Design构建基于Rest/GraphQl API的Web应用程序。在React上star数超过8k。
https://github.com/marmelab/react-admin ReactAdmin不是个UI组件库，它是一个前端框架，因此你基本上基本上只要按照官网的文档进行一些配置等然后在其基础上开发自己的应用程序即可，可谓开箱即用，意识就是都给你集成好了。 你可以直接使用以下命令进行安装（这是安装react-admin及所有的依赖） 下面我们看一下官网提供的一个最简单的示例，你可以在它的主仓库中获取我们进入到simple中，大致看一下代码和目录结构我们安装一些依赖然后启动 成功后打开浏览器，这是使用react-admin最简单的一个例子一图了解由于ReactAdmin是一个非常复杂的框架，你可以参考提供的文档，我这里就不详细介绍了，感兴趣的可以直接看文档，文档是英文的，所有的说明都在文档中。 https://marmelab.com/react-admin/ReactAdmin它是一个集合，它将一些前端开发所需要的东西都集成了进来，然后做好，我们直接使用即可，不仅仅适合个人学习，也适合通过它来构建企业级的应用。我们不仅仅是拿过来直接用，我们可看一看别人是怎么实现这样的一个框架的，从源码去学习会更快的提升自己的水平，希望对你有所帮助！上文中提到在App.vue文件中使用了router-view来展示路由对应的视图，针对router-view，官方解释如下，有兴趣的童鞋移步 链接
在此之前，我们要了解该框架下几个重要的布局组件：
我们以默认的路由/#/dashboard/workplace 为例，看下页面如何展示对应组件。
框架中如果没有设置使用异步路由，默认路由在router/config.js中，dashboard配置的路由如下
如上，访问根路径会被重定向到#/login，登录成功后会重定向到/#/dashboard/workplace。
路由匹配三级：1）根路径 2）/dashboard路径 3）/dashboard/workplace
路由匹配到根路径，并加载TabsView组件到App.vue中指定的router-view中，我们来看下TabsView组件。
它位于@layouts/TabsView.vue中，主要有AdminLayout包裹contextmenu(右键菜单)、tabsHead（多tab标签栏）以及下级路由渲染的router-view组成。
整个页面的展示如下
dashboard匹配加载BlankView，BlankView是一个空白页面，主要包含切换动画和router-view
还有另外一种PageView，包含了 PageLayout 布局和路由视图内容区
展示如下
异步加载@/pages/dashboard/workplace下的组件，并渲染到BlankView组件中
在workplace组件中，主要使用antd组件库中的 Grid布局
以上为vue-antd-admin框架的布局和渲染流程，接下来剖析左侧菜单以及路由解析规则的生成
