前端服務化的第一種方式是提供一套組件庫, 如element，iview，ant design，此時開發人員的開發方式為: 在代碼中用組件拼湊頁面, 然后寫代碼邏輯.
前端服務化的第二種方式, 是提供頁面可視化組裝系統, 這個系統輸出組裝后的前端工程源碼，通過可視化生成模板工程, 開發人員不需要關注前端組件, 只需要編寫代碼邏輯，也有不少框架工具可以參考。
前端服務化的終極方式, 是直接提供一個開發的 IDE, 將動態邏輯的書寫也在 IDE 中完成。
可視化搭建的基礎是配置化，將HTML Tree, Data 和 Dynamic Logic有機融合。可視化的交互用來修改配置數據來實現頁面的生成和更新。所以需要首先實現配置化開發，也能大大提高前端開發的效率。
相關模式：
動態組件：根據配置化數據結構，動態渲染響應的組件。
決策樹：樹形結構，其中每個內部節點表示一個屬性的測試，每個分支代表一個測試輸出，每個葉節點代表一種類別。
中介者模式：統一管理封裝，多個對象之間的通信依賴。各對象不需要顯式的相互引用，使其耦合松散。
頁面分區：
FilterBox：時間，單選，級聯，查詢按鈕，生成查詢參數控制下面的數據。
IndexCardBox：根據FilterBox參數調接口，展示返回所得數據。
trendBox：根據FilterBox篩選參數，和IndexCardBox指標卡的選擇調接口展示趨勢。
程序流程：
全局store.js
1、 導出一個vue的實例，管理頁面各組件之間的狀態和通信，實現頁面輕量級store。
2、 維護，動態組建的路徑 typeMap。使用vue異步動態組件。配置頁面所需展示的組件樹，動態渲染，實現頁面結構與數據的可配置化。
3、根據中介者模式實現模塊之間的參數依賴。各模塊可向全局發送state狀態，根據stateLoginMap中的依賴關系，收集參數傳入其他模塊，並觸發鈎子函數更新數據。
模塊Box
1、this.$loaded加載狀態：
異步組件，初始化data中loading設為false，手動調用this.$loaded(true)轉換狀態；
同步組件，會在mounted鈎子中自動調用this.$loaded(true)轉換狀態；
this.$loaded(true)標志完成加載並已經向全局發送state狀態，
被依賴的模塊的會在模塊loading狀態全為true后，才能觸發paramsChange鈎子.
2、 paramsChange鈎子，接收變化
在依賴state變化后，會組裝成params傳入模塊，觸發模塊的paramsChange鈎子。
從this.store.params中獲取最新的參數，更新數據展示。
3、 this. $commit 提交state變化
觸發全局中 [components]-refresh向頂層發送篩選參數，自定義方法覆蓋storeMixins自動的賦值，合並到全局的state對象中。
模塊Box-filterBox
組件樹components和動態邏輯logicMap完全由store控制。
1、 組件樹配置。如下一個簡單下拉選項，可見
type為組價類型，
refKey為組件的唯一識別，
paraKey為組件向全局輸出參數的字段名，
options為組件展示需要的數據，可以異步賦值
2、 動態邏輯。有兩種形式
一種按照決策樹的算法結構，如上logicMap，實現簡單的依賴關系。可實現當plus_type篩選組件選擇formal值時，渲染對應數組內的組件；當選擇prob值時，渲染另外狀態的組件。
更復雜的動態邏輯，在filterBoxRefres鈎子函數中實現。在filterBox的篩選項變化時，會觸發類型為watch的鈎子函數，可修改組件的渲染狀態；在初始化加載完以及點擊查詢按鈕時，會觸發類型為emit的鈎子函數，可以整理參數的結構再下發給依賴的模塊
組件-selectFilter
普通模塊可以使用各種通用組件庫，但FilterBox模塊的組件需要自行封裝來匹配模塊的運行。
1、 this.$updateFilter()向上級模塊發送選擇的值。
同步或異步初始化完成，選擇變化，顯示隱藏轉換等狀態變化都需要及時調用更新狀態值，便於更新篩選組件之間的動態更新。
2、this.store 獲取配置項，監聽變化及時更新狀態。