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

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

PC：https://admin.cabloy.com

Mobile：

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

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

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

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

egg-born-front/src/base/mixin/config.js:
config.js配置布局信息，可通過修改配置實(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)組件，動態(tài)異步加載所需的布局組件

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