×

关注微信公众号

教程网 首页 教程 web前端 html5 查看内容
免备案网站空间双线空间域名查询咔咔摄影photoshop cs3视频教程

手摸手,带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板) ...

时间 : 2018-11-9 05:40

作者 : guan_ys 原作者:花裤衩|

 查看 : ( 3231 )  评论 : ( 0 )

摘要 : vue+elementUI开发后台管理系统

前言

做这个 vueAdmin-template 的主要原因是: vue-element-admin 这个项目的初衷是一个 vue 的管理后台集成方案,把平时用到的一些组件或者经验分享给大家,同时它也在不断的维护和拓展中,比如最近重构了dashboard,加入了全屏功能,新增了 tabs-view 等等。所以项目会越来越复杂,不太适合很多初用 vue 的同学来构建后台。所以就写了这个基础模板,它没有复杂的功能,只包含了一个后台需要最基础的东西。 vueAdmin-template 主要是基于vue-cli webpack模板为基础开发的,引入了如下dependencies:

  • element-ui 饿了么出品的vue2.0 pc UI框架
  • axios 一个现在主流并且很好用的请求库 支持Promise
  • js-cookie 一个轻量的JavaScript库来处理cookie
  • normalize.css 格式化css
  • nprogress 轻量的全局进度条控制
  • vuex 官方状态管理
  • vue-router 官方路由

该项目只做了一个管理后台需要极简的功能,封装了axios请求,支持无限层级路由,动态权限和动态侧边栏。 如果需要更多复杂的功能可以参考 vue-element-admin,若还有不足,欢迎提issue或者pr。下文会简单说一下用该模板需要注意的地方。


路由懒加载

路由懒加载应该是写大一点的项目都会用的一个功能,只有在使用这个component的时候才会加载这个相应的组件,这样写大大减少了初始页面 js 的大小并且能更好的利用游览器的缓存。

const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
复制代码

在懒加载页面不多的情况下一切是那么的美好,但我司后台业务在不断地迭代,现在项目近百个路由,这时候使用路由懒加载在开发模式下就是一件痛苦的事情了,随手改一行代码热更新都是要6000ms+的,这怎么能忍。楼主整整花了一天多的时间找原因,能webpack优化的方法都用了,什么 dll, HappyPack 等方法都是过了,但提升的效果都不是很明显,正好那段时间出了 webpack3 楼主也升级了,编译速度也得到了很大幅度的提升,不过也要2000ms+。后来经过大神 @jzlxiaohei 的指点发现原来是路由懒加载搞得鬼,楼主猜测可能是异步加载导致 webpack 每次的 cache 失效了,所以每次的rebuild 才会这么的慢。找到了原因我们就可以对症下药了,我们就自己封装了一个_import()的方法,只有在正式环境下才使用懒加载。这样解决了困扰多事的rebuild慢问题。代码

const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');
复制代码

整整比原来6000ms快了十多倍,我终于又能愉快的开发了。


权限 控制

手摸手,带你用vue撸后台 系列二(登录权限篇)这章中其实已经详细介绍过了。该项目中权限的实现方式是:通过获取当前用户的权限去比对路由表,生成当前用户具的权限可访问的路由表,通过router.addRoutes动态挂载到router上。 但其实很多公司的业务逻辑可能不是这样的,举一个例子来说,很多公司的需求是每个页面的权限是动态配置的,不像本项目中是写死预设的。但其实原理是相同的。如这个例子,你可以在后台通过一个tree控件或者其它展现形式给每一个页面动态配置权限,之后将这份路由表存储到后端。当用户登录后根据role,后端返回一个相应的路由表或者前端去请求之前存储的路由表动态生成可访问页面,之后就是router.addRoutes动态挂载到router上,你会发现原来是相同的,万变不离其宗。


导航

侧边栏:本项目里的侧边栏是根据 router.js 配置的路由并且根据权限动态生成的,这样就省去了写一遍路由还要再手动写侧边栏这种麻烦事,同是使用了递归组件,这样不管你路由多少级嵌套,都能愉快的显示了。权限验证那里也做了递归的处理。

面包屑:本项目中也封装了一个面包屑导航,它也是通过watch $route动态生成的。代码

由于侧边栏导航和面包屑亦或是权限,你会发现其实都是和router密切相关的,所以基于vue-router路由信息对象上做了一下小小的拓展,自定义了一些属性

  • icon : the icon show in the sidebar
  • hidden : if hidden:true will not show in the sidebar

  • redirect : if redirect:noredirect will not redirct in the levelbar

  • noDropdown : if noDropdown:true will not has submenu in the sidebar

  • meta : { role: ['admin'] } will control the page role

    大家也可以结合自己的业务需求增改这些自定义属性。


iconfont

element-ui自带的图标不是很丰富,但管理后台图标的定制性又很强。这里只给大家推荐使用阿里的 iconfont ,简单好用又方便管理。本项目中已经嵌入了一些 iconfont 作为例子,大家可以自行替换。 这里来简单介绍一下 iconfont 的使用方式。首先注册好 iconfont 账号之后,可以在我的项目中管理自己的 iconfont 。我司所有的项目都是用这个管理的,真心推荐使用。

创建好图标库后如果有更新替换也很方便,这里我使用了 Symbol 的方式引入,这里还有unicodefont-class的引入方式,有兴趣的可以自行研究。 之后我们点击下载 Symbol,会发现有如下这些文件,我们只要关心iconfont.js就可以了

我们将它替换项目中的 iconfont.js 就可以了。本项目中也封装了一个svg component 方便大家使用。

    <icon-svg icon-class="填入你需要的iconfont名字就能使用了"></icon-svg>
复制代码

favicon

每个项目都需要有一个属于自己的favicon。

其实实现起来非常的方便,我们主需要借助html-webpack-plugin

//webpack config
function resolveApp(relativePath) {
    return path.resolve(relativePath);
}
new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      favicon: resolveApp('favicon.ico')
    }),
复制代码

你只要将本项目跟目录下的favicon.ico文件替换为你想要的图标即可。


eslint

vue cli 默认提供了standardairbnb 两种 lint 规范,说真的一个j检查校验的太松一个又太紧,而且每个团队的 lint 规范又是不同的,所以楼主干脆在项目里把大部分常用的 lint 规范都列举了出来并写上了注释方便大家修改代码地址,大家也可以把自己的规范上传到npm,像 vue 一样 vue-eslint-config。配置 eslint 对多人协作的项目有很大的好处,同时配置好lint 在加 ide 的 lint 插件写代码简直要起飞。相关配置可见第一篇教程

postcss

相信大部分 vue 的项目都是基于 vue-cli 来开发的,不过毕竟每个人需求都是不太一样的,需要自定义一些的东西。就比如拿 postcss 来说 vue-cli 有一个小坑,它默认 autoprefixer 只会对通过 vue-loader 引入的样式有作用,换而言之也就是 .vue 文件里面的 css autoprefixer 才会效果。相关问题issues/544,issues/600。解决方案也很简单粗暴

//app.vue