當(dāng)初框架的設(shè)計(jì)目標(biāo)是：前端、后端、存儲端統(tǒng)統(tǒng)一鍋端，為什么這么設(shè)計(jì)，一方面是想減少開發(fā)人員對于開發(fā)環(huán)境及各類工具的安裝配置時(shí)間，另一方面是想消除各端之間的集成調(diào)試問題，使開發(fā)人員更多的關(guān)注數(shù)據(jù)結(jié)構(gòu)、業(yè)務(wù)邏輯、用戶界面的設(shè)計(jì)與開發(fā)。為了達(dá)成這一目標(biāo)，作者在框架的前端開發(fā)嘗試過類似于拖拉方式的界面生成，但發(fā)現(xiàn)靈活性受到了極大的限制。后來學(xué)習(xí)了Vue等項(xiàng)目，確認(rèn)了框架集成Vue及ElementUI來用于前端用戶界面開發(fā)的方案。

一.實(shí)現(xiàn)思路

由于框架的IDE是基于Web的，如何實(shí)現(xiàn)帶智能提示的代碼編輯及如何實(shí)現(xiàn)界面的即時(shí)預(yù)覽成為一個(gè)小小的挑戰(zhàn)（作者熟悉skia,gdi 等方式畫用戶界面，但不熟悉web前端）。

• 實(shí)現(xiàn)代碼編輯器

作者一開始想到VS Code是基于Electron的就看了一下源碼，結(jié)果發(fā)現(xiàn)微軟從VS Code剝離了代碼編輯器monaco-editor項(xiàng)目，具備了實(shí)現(xiàn)一個(gè)在線代碼編輯器所需要的所有功能，而且驚喜的是monaco editor自帶了HtmlJSCSS著色與智能提示。

• 實(shí)現(xiàn)即時(shí)預(yù)覽

在大體了解了Vue的原理后，作者在IDE的視圖設(shè)計(jì)器內(nèi)實(shí)現(xiàn)了在線將Vue組件的代碼編譯轉(zhuǎn)換為運(yùn)行時(shí)代碼，類似于Webpack分別將模版、腳本、樣式編譯然后組合在一起形成一個(gè)js包，設(shè)計(jì)時(shí)發(fā)給預(yù)覽窗口動(dòng)態(tài)加載，運(yùn)行時(shí)則通過Vue的異步組件功能按需加載。

二.實(shí)現(xiàn)效果

1.組件開發(fā)

每個(gè)組件通過ViewModel關(guān)聯(lián)，開發(fā)完全等同于在線Vue組件開發(fā)，這里不再過多描述。需要注意的是樣式統(tǒng)一為Vue的局部樣式(scoped)。

Tip1: 在代碼編輯內(nèi)CMD S保存, CMD 1,CMD 2,CMD 3分別切換模版、腳本、樣式編輯；

Tip2: 點(diǎn)擊頂部”Preview”在右側(cè)顯示預(yù)覽窗口；

Tip3: 框架集成的ElementUI組件均注冊為全局組件，且前綴為e-xxxx，非默認(rèn)的el-xxxx。

2.組件組合

組合其他子組件時(shí)，需要先在腳本內(nèi)注冊局部組件，如下圖所示：

然后在模版內(nèi)放置注冊的子組件，如下圖所示：

3.組件路由

每個(gè)視圖模型默認(rèn)是不加入路由表的（sys.Home例外是默認(rèn)的主頁），如果在運(yùn)行時(shí)需要通過瀏覽器地址欄直接訪問視圖模型，必須將視圖模型加入路由表，如下圖所示：

Tip1: 自定義路徑如果為空，則使用默認(rèn)路徑，如http://地址/app/index.html#/sys/EmploeeList；不為空則為http://地址/app/index.html#/{自定義路徑}；

Tip2: 自定義名稱支持多級，如: PersonInfo/Address。

4.服務(wù)集成

框架支持兩種方式調(diào)用服務(wù)模型進(jìn)行業(yè)務(wù)邏輯處理：

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.組件調(diào)試

本想跟服務(wù)模型一樣在服務(wù)端跑一個(gè)調(diào)試進(jìn)程，但考慮實(shí)現(xiàn)復(fù)雜暫直接利用瀏覽器的調(diào)試功能。另由于作者的半吊子Web前端水平，暫沒有搞定sourcemap，所以瀏覽器調(diào)試器內(nèi)顯示的源碼是視圖設(shè)計(jì)器編譯轉(zhuǎn)換過后的，比較丑陋，具體參考下圖所示：

Tip: 在調(diào)試器Sources面板快捷鍵CMD p然后輸入{應(yīng)用名}.{視圖名}如sys.Home.js可以快速定位編譯轉(zhuǎn)換后的源碼。

三.本篇小結(jié)

目前實(shí)現(xiàn)的部分用來開發(fā)網(wǎng)站、中后臺系統(tǒng)、微信公眾號之類的應(yīng)用是沒有問題的，待將來Google開源了Hummingbird后作者還想在IDE內(nèi)實(shí)現(xiàn)移動(dòng)App的用戶界面開發(fā)。如果您有問題或Bug報(bào)告，請留言或在https://github.com/enjoycode/appbox.deploy提交Issue。