前面幾篇都是在介紹結構化與非結構化的數據存儲，本篇換換口味介紹一下框架是如何實現前端組件化開發的。首先得感謝Vue、ElementUI等優秀的前端開源項目，這些項目幫助作者快速實現了框架的兩個前端工程（IDE及Web應用)的開發。
當初框架的設計目標是：前端、後端、存儲端統統一鍋端，爲什麼這麼設計，一方面是想減少開發人員對於開發環境及各類工具的安裝配置時間，另一方面是想消除各端之間的集成調試問題，使開發人員更多的關注數據結構、業務邏輯、用戶界面的設計與開發。爲了達成這一目標，作者在框架的前端開發嘗試過類似於Winform拖拉方式的界面生成，但發現靈活性受到了極大的限制。後來學習了Vue等項目，確認了框架集成Vue及ElementUI來用於前端用戶界面開發的方案。
一.實現思路
由於框架的IDE是基於Web的，如何實現帶智能提示的代碼編輯及如何實現界面的即時預覽成爲一個小小的挑戰（作者熟悉skia,gdi+等方式畫用戶界面，但不熟悉web前端）。
1.實現代碼編輯器
作者一開始想到VS Code是基於Electron的就看了一下源碼，結果發現微軟從VS Code剝離了代碼編輯器monaco-editor項目，具備了實現一個在線代碼編輯器所需要的所有功能，而且驚喜的是monaco editor自帶了Html\JS\CSS着色與智能提示。
2.實現即時預覽
在大體瞭解了Vue的原理後，作者在IDE的視圖設計器內實現了在線將Vue組件的代碼編譯轉換爲運行時代碼，類似於Webpack分別將模版、腳本、樣式編譯然後組合在一起形成一個js包，設計時發給預覽窗口動態加載，運行時則通過Vue的異步組件功能按需加載。
二.實現效果
1.組件開發
每個組件通過ViewModel關聯，開發完全等同於在線Vue組件開發，這裏不再過多描述。需要注意的是樣式統一爲Vue的局部樣式(scoped)。
- Tip1: 在代碼編輯內CMD+S保存, CMD+1,CMD+2,CMD+3分別切換模版、腳本、樣式編輯；
- Tip2: 點擊頂部"Preview"在右側顯示預覽窗口；
- Tip3: 框架集成的ElementUI組件均註冊爲全局組件，且前綴爲e-xxxx，非默認的el-xxxx。
2.組件組合
組合其他子組件時，需要先在腳本內註冊局部組件，如下圖所示：
然後在模版內放置註冊的子組件，如下圖所示：
3.組件路由
每個視圖模型默認是不加入路由表的（sys.Home例外是默認的主頁），如果在運行時需要通過瀏覽器地址欄直接訪問視圖模型，必須將視圖模型加入路由表，如下圖所示：
- Tip1: 自定義路徑如果爲空，則使用默認路徑，如http://地址/app/index.html#/sys/EmploeeList；不爲空則爲http://地址/app/index.html#/{自定義路徑}；
- Tip2: 自定義名稱支持多級，如: PersonInfo/Address。
4.服務集成
框架支持兩種方式調用服務模型進行業務邏輯處理：
4.1 異步await方式：
4.2 異步Promise方式：
export default class Home extends Vue {
onclick() {
sys.Services.HelloService.SayHello().then(res => {
this.$message.info(res);
}).catch(err => {
this.$message.error(err);
});
}
}5.組件調試
本想跟服務模型一樣在服務端跑一個調試進程，但考慮實現複雜暫直接利用瀏覽器的調試功能。另由於作者的半吊子Web前端水平，暫沒有搞定sourcemap，所以瀏覽器調試器內顯示的源碼是視圖設計器編譯轉換過後的，比較醜陋，具體參考下圖所示：
- Tip: 在調試器Sources面板快捷鍵CMD+p然後輸入{應用名}.{視圖名}如sys.Home.js可以快速定位編譯轉換後的源碼。
三.本篇小結
目前實現的部分用來開發網站、中後臺系統、微信公衆號之類的應用是沒有問題的，待將來Google開源了Hummingbird後作者還想在IDE內實現移動App的用戶界面開發。目標很遠大，道路還很漫長，待作者整理好前端工程的代碼後將率先開源，希望感興趣的同志共同參與。如果您有問題或Bug報告，請留言或在Github提交Issue。