IE8前端框架之中后台系统解决方案（一）

需求

1. 兼容ie8 （客户群体电脑因为安全问题无法升级，所以必须兼容ie8 ）
2. 界面是中后台系统管理界面
3. 形成框架，方便二次开发人员开发。
4. 形成组件库，并且可配置化
5. 提升界面颜值

思路

1. 兼容ie8
   本咸鱼以前的技术栈是vue全家桶，vue底层是用defineproperty实现的双向绑定，这个方法ie8是不支持的，所以放弃vue， 同时react和angular 很早的版本才兼容ie8，一想到要去踩以前的老坑，我也是毅(yi)然(yi)决(bu)然(she)的放弃了。

   三大主流框架不能用，还有一些mvvm框架据说是支持ie8的。

   • omi 腾讯
   • san 百度
   • avalon
   • knockout
     以上框架都支持了ie8，但是在细节方面还是有待优化的地方，比如路由，脚手架方面，还有一段路要走，为了避免踩坑，决定放弃这几种框架。

2. 中后台系统解决方案
   先安利一波三大框架的中后台解决方案

   • vue-element-admin -vue
   • ant design pro -react
   • ng-alain -angular

   如果不需要考虑ie8，那么这三个可以基本满足中后台管理系统前端需求了。
   如果考虑ie8的话，那么layui-admin (付费)，也可以解决。

   墙裂推荐layui，layui本身是开源的，只是后台解决方案是付费的。

3. 框架定型

   • js + layui
     

   • 单页面应用
     

   • 模板引擎实现组件的可配置化
     

   单页面应用

   考虑到中后台管理系统的布局(头部是基本导航，左边是目录导航, 右边是内容)，是需要局部刷新的。那么只能用iframe或者单页面应用。iframe存在种种弊端，所以最终决定使用单页面，局部刷新，是通过动态渲染局部dom实现。
   页面路由和局部刷新参考了部分开源作品(weadmin xadmin)

4. 框架细节
   基本的路由和ui框架都有了，接下来需要完善其他部分，也是本系列重点要讲的地方。

   • 权限认证
   • 路由守卫
   • 信息存储
   • 组件可配置化

5. 界面颜值
   layui本身就是高颜值的ui框架