摘要:今天開(kāi)始,一點(diǎn)點(diǎn)記錄一下使用搭建一個(gè)基礎(chǔ)結(jié)構(gòu)的過(guò)程。沒(méi)辦法,記性差這種結(jié)構(gòu)的前端,主要是面向后臺(tái)信息管理系統(tǒng),可以最大限度的規(guī)范前端代碼結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)。
今天開(kāi)始,一點(diǎn)點(diǎn)記錄一下使用extjs6.2.0搭建一個(gè)基礎(chǔ)MVC結(jié)構(gòu)的過(guò)程。沒(méi)辦法,記性差:)目標(biāo)
這種結(jié)構(gòu)的UI前端,主要是面向后臺(tái)信息管理系統(tǒng),可以最大限度的規(guī)范前端代碼結(jié)構(gòu)和數(shù)據(jù)結(jié)構(gòu)。做網(wǎng)站 或者手機(jī)端,這種方式全引入了extjs,就不太合適了。
左側(cè)導(dǎo)航菜單+中間多頁(yè)面布局,有header 有footer,SPA應(yīng)用
js文件動(dòng)態(tài)加載、模塊動(dòng)態(tài)化按需加載
盡量多寫點(diǎn)注釋信息,哎,不得不說(shuō),還是....代碼隔三日,如隔三秋啊!
開(kāi)始.....
選個(gè)開(kāi)發(fā)工具結(jié)論:webstorm最新版。
比較了vscode 、sublime等等。最終選擇了webstorm,咋辦呢?idea的腦殘粉,java開(kāi)發(fā)一直用,習(xí)慣了,中毒太深。
去官網(wǎng)下載一個(gè)gpl版本的壓縮包,下載extjs.或者:extjs6.2.0度娘
新建一個(gè)目錄extjs/6.2.0/拷貝相關(guān)目錄和文件到這個(gè)目錄下,具體是:
ext-all.js
build/classic/下面所有
build/packages/ux/classic/下面所有。
最終,看起來(lái)貌似如下:
這個(gè)就不多說(shuō)了,直接上圖
目錄和文件說(shuō)明:
app/luter:extjs的app文件放這里,名字隨意,隨后會(huì)在入口app.js中配置動(dòng)態(tài)加載路徑用到
app/resource/css:放一些自定義樣式
app/resource/images:放圖!
app/vendor/:放第三方庫(kù)
EXTJS6.2.0MVC