摘要：前言目前流行的前端組件庫都支持移動設備優先的響應式布局特性。充分利用了的優良特性，充分發揮其最大價值。不重復造輪子，而是采用業界最新的開源技術，進行全棧開發的最佳組合。

目前流行的前端UI組件庫都支持移動設備優先的響應式布局特性。但基于Mobile和PC兩個場景的不同用戶體驗，也往往會實現Mobile和PC兩個版本。
PC場景下的Web工程，如大量的后臺前端管理模版，雖然支持Mobile自適應，但其用戶體驗差強人意。
Cabloy采用不同的思路，仍然基于移動優先，同時通過特殊的布局優化，使得移動頁面可以完整的用于PC場景，既保證了用戶體驗，又提升了開發效率，大大簡化了開發工作量。

PC：https://admin.cabloy.com

Mobile：

Cabloy的PC布局將頁面切分為若干個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的patch，實現Tab之間與View之間的URL跳轉。

Cabloy通過不同的模塊封裝不同布局的實現邏輯，然后在根結點組件中針對頁面的尺寸的變化渲染不同的布局。
需要特別說明的是，Cabloy中的模塊是一個相對獨立的實體，可以根據需要異步加載，提升頁面加載性能。

egg-born-front/src/base/mixin/config.js:
config.js配置布局信息，可通過修改配置實現自己的布局管理邏輯

// config
const config = {
  modules: {},
  layout: {
    breakpoint: 800,
    items: {
      mobile: {
        module: "a-layoutmobile",
        component: "layout",
      },
      pc: {
        module: "a-layoutpc",
        component: "layout",
      },
    },
  },
};

egg-born-front/src/inject/pages/app.vue:
app.vue是根結點組件，動態異步加載所需的布局組件

Mobile布局組件源碼參見：https://github.com/zhennann/egg-born-module-a-layoutmobile/blob/master/front/src/components/layout.vue

a-layoutmobile/front/src/config/config.js:
config.js可以靈活配置布局的顯示元素

export default {
  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: "Mine", tabLinkActive: false, iconMaterial: "person", url: "/a/user/user/mine" },
    ],
  },
};

Mobile布局組件源碼參見：https://github.com/zhennann/egg-born-module-a-layoutpc/blob/master/front/src/components/layout.vue

a-layoutpc/front/src/config/config.js:
config.js可以靈活配置布局的顯示元素

export default {
  layout: {
    login: "/a/login/login",
    loginOnStart: true,
    header: {
      buttons: [
        { name: "Home", 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