- 刪除不需要的文件甜滨、把App.vue作為根路由出口
用 Vue Cli 腳手架創(chuàng)建完項(xiàng)目后有默認(rèn)的Home和About頁(yè)面以及components下的HelloWorld組件萄窜。刪除這幾個(gè)文件解虱，清空router/index.js中的routes路由規(guī)則盆色，App.vue中只保留 router-view 同時(shí)#app的寬高為整個(gè)屏幕
-
views目錄下新增 Index.vue 首頁(yè)組件粥帚，內(nèi)容暫時(shí)只簡(jiǎn)單顯示"index"胰耗；同時(shí)router/index.js中的routes數(shù)組中新增該index路由規(guī)則，此時(shí)頁(yè)面顯示根路徑/對(duì)應(yīng)的頁(yè)面芒涡，也就是新增的Index頁(yè)面：
新增Index.vue -
頁(yè)面結(jié)構(gòu)規(guī)劃柴灯。常見(jiàn)管理后臺(tái)頁(yè)面結(jié)構(gòu)如圖（左側(cè)Logo和菜單欄卖漫、右側(cè)上邊為頂欄顯示登錄用戶、右側(cè)下邊為頁(yè)面顯示內(nèi)容區(qū)域）：
頁(yè)面結(jié)構(gòu) -
使用 ElementUI 實(shí)現(xiàn)靜態(tài)的頁(yè)面結(jié)構(gòu)赠群。終端中運(yùn)行 npm i element-ui 安裝ElementUI羊始，安裝成功后在 main.js 中引入并use。這里測(cè)試直接完整引入查描，實(shí)際項(xiàng)目如需按需引入按照ElementUI官網(wǎng)文件操作即可( https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru )突委；注意需要引入elementUI的css。然后在剛才新增的Index.vue頁(yè)面中寫(xiě)一個(gè)<el-button>組件測(cè)試是否引入成功冬三。
使用ElementUI 實(shí)現(xiàn)Layout靜態(tài)布局匀油。src目錄下新增layout目錄及各個(gè)組件文件（SideBar、TopBar长豁、MainContent）钧唐，layout/Index.vue下引入3個(gè)子組件并注冊(cè)，使用flex布局實(shí)現(xiàn)設(shè)計(jì)的頁(yè)面結(jié)構(gòu)匠襟；這里使用了sass語(yǔ)法钝侠，需要安裝相關(guān)依賴（安裝的node-sass和sass-loader版本與node版本需要配套，我本地的node版本是16.8酸舍∷停可以搜索與自己本地的node版本兼容的sass依賴并指定版本安裝），終端中運(yùn)行
npm i node-sass@6.* sass-loader@10.* -D
安裝依賴后即可使用sass語(yǔ)法寫(xiě)樣式啃勉。安裝后終端中如有報(bào)錯(cuò)重新編譯即可忽舟。
修改router/index.js中關(guān)于 / 根路徑的路由規(guī)則，引入Layout淮阐，同時(shí)為根路徑添加子路由叮阅，訪問(wèn)根路徑時(shí)自動(dòng)轉(zhuǎn)到該子路由，子路由的頁(yè)面內(nèi)容將渲染到Layout中MainContent組件的 router-view路由出口處泣特。
使用ElementUI的 NavMenu 導(dǎo)航菜單 組件實(shí)現(xiàn)左側(cè)菜單：在store中添加控制菜單欄展開(kāi)收起的state屬性 sideBarIsCollapse， 并添加切換狀態(tài)值的mutation方法 TOGGLE_SIDE_BAR状您。 為展開(kāi)收起圖標(biāo)添加點(diǎn)擊事件commit該mutation勒叠；同時(shí)在layout/Index.vue中動(dòng)態(tài)綁定style，根據(jù)sideBarIsCollapse的值動(dòng)態(tài)計(jì)算菜單欄的寬度膏孟。
之后給TopBar和MainContent簡(jiǎn)單的樣式即可實(shí)現(xiàn)頁(yè)面的整體布局：
下篇文章繼續(xù)添加測(cè)試路由和頁(yè)面眯分，封裝axios并登錄請(qǐng)求token和roles。
