手摸手，带你用vue撸后台（vue hook）

Vue极简后台模板藏玄机，开发卡顿时长超6秒，动态路由的真相

前几天看到有人分享一个vue后台模板，说适合新手用。我拿过来试试发现确实简单，但用了段时间发现了不少门道。作者自己写的这个模板主要是为了替代那个庞大复杂的vue-element-admin，把核心功能留着，砍掉花里胡哨的部分，方便新人快速上手。项目里用了vue和webpack，装了一些基础库，连favicon换起来都教得明明白白。

里面路由懒加载一开始挺爽的，每个页面单独加载不用一次全下。但公司项目路由太多后出了问题，改代码热更新要等六七秒，简直要崩溃。作者试了好多办法都不行，后来发现是懒加载导致编译缓存老失效。最后他搞了个环境变量开关，生产环境用懒加载，开发环境全打包，速度唰地就降到了两秒内。代码改几下就能立马看见效果，这招真香。

关于权限这块，以前都是固定写死哪些人能看什么页面。但很多公司需要动态配置，比如用树形图选权限再存到服务器。其实原理差不多，就是后端给个路由表，前端拿到后再生成菜单。模板里侧边栏和面包屑都是根据路由自动生成的，不用手动写两遍，省了好多事。路由还能加隐藏标记，有些页面只存在路由但不显示在菜单里，挺灵活的。

图标用element-ui自带的不够用，作者推荐阿里矢量图标库。注册个号自己管理图标就行，用的时候像搭积木一样往页面里插。连怎么改favicon都教了，在webpack配置里加一行文件路径，替换根目录的ico文件就能生效。eslint规范也没照搬现成的，列出一堆常用规则让大家自己改，适合不同团队习惯。

跨域问题很多人头疼，作者说最好的办法是让后端配CORS。每次请求先发个预验证，确认安全后再真正请求，虽然麻烦但一劳永逸。如果实在改不了后端，开发环境用webpack代理，生产环境配nginx反代也能解决。还有mock数据用easy-mock，比以前那些假数据工具好用，支持跨域还兼容mockjs语法。

打包环境区分也简单，在配置文件里写好dev和prod的api地址，构建时自动选对应的。axios封装了请求拦截，自动带上token，响应拦截处理错误提示。甚至还能在单个请求里改baseurl，比如某个接口要调其他服务器，直接在参数里写新地址就行。

用这个模板开发后台省了不少力气，该有的功能都有，复杂功能再去参考那个大项目就行。作者各种踩坑总结的经验都写在代码注释里，比如postcss处理样式兼容性， babel兼容低版本浏览器的方法。连怎么换主题颜色都说清楚，改个scss变量就生效。