摘要：前言目前流行的前端組件庫(kù)都支持移動(dòng)設(shè)備優(yōu)先的響應(yīng)式布局特性。充分利用了的優(yōu)良特性，充分發(fā)揮其最大價(jià)值。不重復(fù)造輪子，而是采用業(yè)界最新的開(kāi)源技術(shù)，進(jìn)行全棧開(kāi)發(fā)的最佳組合。

目前流行的前端UI組件庫(kù)都支持移動(dòng)設(shè)備優(yōu)先的響應(yīng)式布局特性。但基于Mobile和PC兩個(gè)場(chǎng)景的不同用戶(hù)體驗(yàn)，也往往會(huì)實(shí)現(xiàn)Mobile和PC兩個(gè)版本。
PC場(chǎng)景下的Web工程，如大量的后臺(tái)前端管理模版，雖然支持Mobile自適應(yīng)，但其用戶(hù)體驗(yàn)差強(qiáng)人意。
Cabloy采用不同的思路，仍然基于移動(dòng)優(yōu)先，同時(shí)通過(guò)特殊的布局優(yōu)化，使得移動(dòng)頁(yè)面可以完整的用于PC場(chǎng)景，既保證了用戶(hù)體驗(yàn)，又提升了開(kāi)發(fā)效率，大大簡(jiǎn)化了開(kāi)發(fā)工作量。

PC：https://admin.cabloy.com

Mobile：

Cabloy的PC布局將頁(yè)面切分為若干個(gè)Mobile+Pad的組合，帶來(lái)了與眾不同的用戶(hù)體驗(yàn)。
從此開(kāi)發(fā)類(lèi)似于微信公眾號(hào)或H5混合開(kāi)發(fā)的項(xiàng)目，再也不用建立兩套獨(dú)立的工程。

Cabloy前端基于Framework7，并一直跟進(jìn)其最近的開(kāi)發(fā)進(jìn)度，從1.0到2.0，再到3.0。Cabloy充分利用了Framework7的優(yōu)良特性，充分發(fā)揮其最大價(jià)值。
Cabloy的作者zhennann在Framework7的貢獻(xiàn)圖如下：

Framework7將頁(yè)面分為若干個(gè)View，每個(gè)View對(duì)應(yīng)一個(gè)Router，管理若干個(gè)Page，從而非常方便的實(shí)現(xiàn)Page之間的堆疊。
Cabloy的PC布局，將頁(yè)面分為若干個(gè)Tab，每個(gè)Tab再包含若干個(gè)View。通過(guò)對(duì)Router的patch，實(shí)現(xiàn)Tab之間與View之間的URL跳轉(zhuǎn)。

Cabloy通過(guò)不同的模塊封裝不同布局的實(shí)現(xiàn)邏輯，然后在根結(jié)點(diǎn)組件中針對(duì)頁(yè)面的尺寸的變化渲染不同的布局。
需要特別說(shuō)明的是，Cabloy中的模塊是一個(gè)相對(duì)獨(dú)立的實(shí)體，可以根據(jù)需要異步加載，提升頁(yè)面加載性能。

egg-born-front/src/base/mixin/config.js:
config.js配置布局信息，可通過(guò)修改配置實(shí)現(xiàn)自己的布局管理邏輯

// 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是根結(jié)點(diǎn)組件，動(dòng)態(tài)異步加載所需的布局組件

Mobile布局組件源碼參見(jiàn)：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布局組件源碼參見(jiàn)：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進(jìn)行全棧開(kāi)發(fā)的最佳實(shí)踐。
Cabloy不重復(fù)造輪子，而是采用業(yè)界最新的開(kāi)源技術(shù)，進(jìn)行全棧開(kāi)發(fā)的最佳組合。
歡迎大家拍磚、踩踏。
地址：https://github.com/zhennann/cabloy