前言目前流行的前端UI组件库都支持移动设备优先的响应式布局特性。但是基于Mobile和PC场景的不同用户体验，往往会实现Mobile和PC版本。PC场景下的Web工程，如大量的后台和前端管理模板，支持Mobile适配，但其用户体验并不理想。Cabloy采用了不同的思路，依然是基于移动端优先，通过特殊的布局优化，让移动端页面完全可以在PC端使用，既保证了用户体验，又提高了开发效率，大大简化了开发工作量.DemoPC:https://admin.cabloy.comMobile:上面的mobilelayoutPClayout进一步分析Cabloy的PClayout将页面分成了几个Mobile+Pad的组合，带来了独特的用户体验。从此，你可以开发类似微信公众号或H5混合开发的项目，不再需要构建两个独立的项目。内部机制Cabloy前端基于Framework7，一直在跟进其近期的开发进度，从1.0到2.0，再到3.0。Cabloy充分利用了Framework7的优秀特性，充分发挥其最大价值。Cabloy的作者zhennann在Framework7中的贡献如下：Framework7将页面分成若干个View，每个View对应一个Router，管理若干个Page，这样很方便实现Page之间的堆叠。Cabloy的PC布局将页面分成若干个Tab，每个Tab又包含若干个View。通过给Router打补丁，实现Tabs和Views之间的URL跳转。代码实现了根节点组件Cabloy，通过不同的模块来封装不同布局的实现逻辑，然后根据页面的大小变化在根节点组件中渲染出不同的布局。需要注意的是，Cabloy中的模块是一个相对独立的实体，可以根据需要异步加载，提高页面加载性能。egg-born-front/src/base/mixin/config.js:config.js配置布局信息，可以通过修改配置实现自己的布局管理逻辑//configconstconfig={modules:{},layout:{断点：800，项目：{移动设备：{模块：'a-layoutmobile'，组件：'布局'，}，pc：{模块：'a-layoutpc'，组件：'布局'，}，}，}，};egg-born-front/src/inject/pages/app.vue:app.vue为根节点组件，动态异步加载需要的布局组件Mobile布局组件Mobile布局组件源代码参见：https://github.com/zhennann/egg-born-module-a-layoutmobile/blob/master/front/src/components/layout.vuea-layoutmobile/front/src/config/config.js:config.js可以灵活配置layout的显示元素exportdefault{layout:{login:'/a/login/login',loginOnStart:true,toolbar:{tabbar:true,labels:true,bottomMd:true,},tabs:[{name:'Home',tabLinkActive:true,iconMaterial:'home',url:'/a/base/menu/list'},{name:'Atom',tabLinkActive:false,iconMaterial:'group_work',url:'/a/base/atom/list'},{name:'我的',tabLinkActive:false,iconMaterial:'人',url:'/a/user/user/mine'},],},};PC布局组件手机布局组件源码见：https://github.com/zhennann/egg-born-module-a-layoutpc/blob/master/front/src/components/layout.vuea-layoutpc/front/src/config/config.js:config.js可以灵活配置布局的显示元素',iconMaterial:'dashboard',url:'/a/base/menu/list',target:'_dashboard'},{name:'Atom',iconMaterial:'group_work',url:'/a/base/atom/list'},],mine:{name:'Mine',iconMaterial:'person',url:'/a/user/user/mine'},},size:{small:320,top:60,spacing:10,},},};结论Cabloy是使用Javascript进行全栈开发的最佳实践Cabloy并没有重新发明轮子，而是使用了业界最新的开源技术，进行全栈开发的最佳组合。欢迎大家拍砖踩。地址：https://github.com/zhennann/cabloy
