**
论vue-admin-template使用感受
**
框架的基本介绍
这是本人的第一篇博客介绍,不足之处望谅解!!!
从一开始接触vue开始慢慢了解路由搭配组件的使用,后来看见了vue-admin-template这么一个封装好的vue框架,内部用的是mock模拟了一个登录信息,前端框架也是用的element框架,可以说很照顾新手了。
初体验
对于一个新人来说,学到东西并且可以完成日常工作是非常完美的一件事了,当我接触到vue-admin-template之后节省了我很多对项目创建的时间,大大加强了我的工作效率。
- 在github下载压缩包,解压npm install下载依赖,在npm run dev运行就可以查看框架基本页面了;
- 一开始使用要熟悉路由和组件,这个对新手来说是非常重要的一步;
- 这个框架内用的是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内的东西,根据自己的要求添上返回主系统的路由跳转。这样一个简便的后台就搭建好了,具体页面内容交互就需要自己的努力了!!!