通過上邊幾節(jié)我們已經(jīng)可以根據(jù)路由去切換組件頁面盒延,這是技術(shù)探索添寺,有了去建立一個產(chǎn)品原型的能力计露,我們已經(jīng)可以開始干點(diǎn)體力活了票罐,先弄個雛形出來胶坠,看到點(diǎn)希望繁堡,然后再去不斷的完善它。
我們的后臺頁面采用典型的布局净赴,頂部,左側(cè)導(dǎo)航金度,右側(cè)主體區(qū)域,出于頁面美觀和習(xí)慣,我們讓頂部和左側(cè)固定,主體區(qū)域可滾動的形式勘高。
頂部
頂部顯示 logo、消息浮定、用戶信息什么的相满,這是產(chǎn)品必須的、通用的桦卒、但是跟核心項(xiàng)目數(shù)據(jù)沒啥太多關(guān)系的立美。
左側(cè)導(dǎo)航
這是功能分類
主體區(qū)域
導(dǎo)航指向的具體功能頁面
先整體想想我們要做的的事
后臺頁面,2行2列方灾,左側(cè)導(dǎo)航右側(cè)內(nèi)容 還有登錄頁建蹄,還有注冊頁,還有找回密碼頁裕偿,這些是不在后臺頁面里的不能用上邊的布局
所以我們應(yīng)該有2個layout洞慎,一個是后臺的,一個是登陸注冊找回密碼啥的這種整頁中間表單的
項(xiàng)目代碼目錄規(guī)劃
我們產(chǎn)出的東西基本都在src目錄下嘿棘,默認(rèn)創(chuàng)建的項(xiàng)目src目錄下有router assets和components 3個文件夾劲腿,按照習(xí)慣我們來規(guī)劃一下,新建幾個目錄
layouts 與樣式和整體布局相關(guān)的扔這里 views 各個功能頁面鸟妙,不如設(shè)備列表啊焦人,統(tǒng)計(jì)頁面啊 components 下放組件挥吵,可復(fù)用的組件,不如標(biāo)題啊花椭,一個報(bào)表啊什么的
assets下再按照傳統(tǒng)的習(xí)慣分css images js fonts 這些
代碼管理
我們現(xiàn)在將代碼加入git
$ git init
$ git add .
$ git commit -a -m "init"