欢迎收看陈某人的博客，对于vue-admin-template进阶过程（一）

**

论vue-admin-template使用感受

**

框架的基本介绍

这是本人的第一篇博客介绍，不足之处望谅解！！！
从一开始接触vue开始慢慢了解路由搭配组件的使用，后来看见了vue-admin-template这么一个封装好的vue框架，内部用的是mock模拟了一个登录信息，前端框架也是用的element框架，可以说很照顾新手了。

初体验

对于一个新人来说，学到东西并且可以完成日常工作是非常完美的一件事了，当我接触到vue-admin-template之后节省了我很多对项目创建的时间，大大加强了我的工作效率。

1. 在github下载压缩包，解压npm install下载依赖，在npm run dev运行就可以查看框架基本页面了；
2. 一开始使用要熟悉路由和组件，这个对新手来说是非常重要的一步；
3. 这个框架内用的是ES6语法，路由采用了懒加载的方式、优化了打包的占比率

path: 'reportData', component: () => import('@/views/reportData/index')

写法也更简便一点
4. 相对应的在views文件夹下创建组件文件，侧边栏内显示相对应的组件内容

path: 'reportData', 
redirect: '/table',
name: 'Example',
//hidden: true,
meta: { title: '社区服务', icon: 'example' },
children: [
  {
    path: 'table',
    name: 'Table',
    component: () => import('@/views/table/index'),
    meta: { title: '社区服务总数据', icon: 'table' }
  }
]

上面一段代码展示的是相对应的侧边内容，meta是展示侧边数据，redirect重定向跳转到/table这段路径一般用于点击一级栏目标题跳转用的，一般一级栏目下只有一个二级栏目 一级栏目会隐藏掉。hidden: true 是用来隐藏侧边栏展示的；
5.相对应的还有顶部的面包屑的使用，对菜鸟而言一般不需要动太多代码，面包屑组件是components里的Breadcrumb

if (first && first.name !== 'dashboard') {
  matched = [{ path: '/dashboard', meta: { title: '' }}].concat(matched)
}

一般我会把title内容删掉，他这个是写死的我们不需要的；
6.因为我一开始写的后台内容是嵌入进公司总系统里面的，所以我就没用上登录页面，可是你会发现无论怎么弄都会需要登录验证，其实你只要把mian.js下面的permission.js里面注释掉就可以，这里面是对你后台系统做登录权限验证的，没有用户的信息的话他会给你重定向到login页面，这一段内容陈某人当时为了做动态路由研究了两天左右才搞明白，具体事项以后会慢慢讲解；
7.因为登录的取消右上角的用户也会用不到，所以在views/layout/components/Navbar.vue的界面里面注释掉el-dropdown内的东西，根据自己的要求添上返回主系统的路由跳转。这样一个简便的后台就搭建好了，具体页面内容交互就需要自己的努力了！！！