从工作之初的requirejs，又经历了nwjs、nodejs，到现在的vue、react-redux、react-native，也走过了一段不长不短的前端开发之路。本篇将分享一下我的前端框架的一点理解。现在最流行的前端框架要数 vue 和 react。按经验，偏中、小型、要短时间内看到成果的我一般选择使用 vue 开发；偏大型，对性能和维护要求较高的我会选择用 react，个人偏好是更喜欢 react 的。针对vue 和 react 框架，我分别搭建了一套vue+vuex+router+stylus 和 react+redux+router+stylus 的参考框架实例，同时，里面还封装了基本的mvc模型、路由、代理、token验证、懒加载、http请求、iconfont管理还有css样式管理等模块，目录结构请参考源码，如有不正确的地方请多多指正，源码 GitHub 地址：
react+redux+router+stylus 框架：https://github.com/smallH/react-web-project.git
vue+vuex+router+stylus 框架：https://github.com/smallH/vue-web-project.git
-
mvc模型和路由
vue目前较好的自然是 vuex 模型，而react一般选用是 redux。vuex 和 redux 都有一套规范的实现流程，对照着官网的语法和规范写就好。这里想讲讲的是路由，路由一般分Hash和History两种模式，它们都属于浏览器自身的特性。Hash模式下在访问时地址中会带‘#’号，如https://music.163.com/#/my/ ，它的原理是监听onhashchange事件，当url发生变化时，浏览器会记录下来，因此前进后退都可以使用，在该模式下，由于请求页面时‘#’号前面的真实路径其实并没有发生变化，仅Hash值改变了（#后面那串），所以浏览器没有请求服务器，如网易云音乐就是Hash模式。History模式在访问时地址不带‘#’号，这种模式，还需要后台的配置支持，如果后台没有正确的资源配置，当用户在浏览器访问就有可能没有找到资源并返回 404，所以呢，这种模式要在服务端增加一个覆盖所有情况的候选资源：当url匹配不到任何静态资源，则应该返回同一个提示页面。至于选择何种模型，其实关系并不大，按照官网的推荐是使用History模式。
-
重置浏览器样式
前端开发调试一般使用谷歌或火狐浏览器，在项目开发前要注意一定要重置浏览器默认样式，否则进入质保测试阶段很多麻烦就来了，各种由浏览器默认样式差异引起的Bug，所以在开发项目前都应该注意：导入一个样式文件，实现各类浏览器初始样式都一致。
-
代理服务
开发阶段一般是前后端分离，前端在local本地调试，这时请求服务端接口API通常会发生跨域异常，幸运的是，vue和react都提供可代理服务的模块，通过代理服务解决这类的跨域请求的问题。关于代理，vue的服务代理在config/index.js中配置，react在package.json中配置。
-
token和权限验证
token验证一般在两个地方，一个是发起http请求时，另一个是路由切换页面时。发起http请求可以使用axios模块或fetch模块，以axios为例，在请求前进行拦截，把token添加到请求头Header中并一起带给服务端，让服务器去验证token有效性。其次在路由切换页面时，可以验证当前token值是否存在或该页面本用户是否有权限打开，权限配置可以从服务端获取。react项目一般使用fetch 替代 axios 。
-
json-server
json-server是一个模拟后端数据接口的模块，当后端团队的api接口还没完成时，前端可以通过json-server由自己来模拟后台数据，这样就可以实现部分功能的前后端联调。
-
组件库
开发团队比较大的一般可以按需自己开发组件库。我们也可以选择第三方组件库，vue通常会选择ElementUI或IView，ElememntUI的维护更新团队会比IView的大，ElememntUI当遇到大数据对部分组件（如树状列表）渲染时性能较好，故我会使用ElementUI。react 通常会使用 ant.design。
-
图标管理
图标可以使用iconfont管理，它可以进行团队协作制作和代码导出、svg导出，同时还有大批量的可参考样式设计，非常适合作为前端项目的图标管理。
-
样式管理
通常引用stylus作为样式的预编译，vue直接模板文件中使用<style lang="stylus" rel="stylesheet/stylus" scoped>写样式即可，react可以通过react-css-modules来模块化管理样式，也可以通过命名样式常量，通过内嵌的方法管理样式。
总之，文字在代码面前是多么的苍白，程序员最实在的还是看源码吧！希望这两个框架模型能给一些初学 vue 和 reacr 搭建框架的朋友会有所帮助和参考作用，一起加油噢！！！