vue後臺管理系統的佈局

首先新建一個vue項目，然後安裝element-ui組件，vuex狀態管理等需要用到的。

項目建立好能運行之後，在src/commponents文件夾下新建一個layout文件夾用於書寫佈局相關代碼，在文件夾內新建header.vue,slider.vue,footer.vue,contentMain.vue,home.vue文件（當然也可以只新建一個home文件，把相關佈局全部寫在home.vue文件內，但是不怎麼推薦）

再在src文件夾內新建一個page文件夾，在裏面按照需求新建文件,用於書寫頁面，新建文件完成之後，大致的目錄結構如下圖

在home.vue頁面內導入header.vue,slider.vue等相關的佈局組件

在router/index.js文件夾內書寫路由，按需加載相應的路由模塊，meta裏面設置相應的title、icon,後面會用到

1. slide.vue
   能夠動態的獲取路由，點擊左側導航能跳轉到對應的界面
   
2. header.vue
   
   3.bread.vue
   左側導航欄摺疊+麪包屑功能
   我把摺疊導航欄跟麪包屑的放一起了，也可以把摺疊的圖標按鈕放到header.vue裏面，這就看相應的要求以及個人的喜歡了
   使用了vuex狀態管理來存儲數據方法，menu.js裏設置左側導航欄的摺疊展開是的寬度，設置isColleapse對應el-menu裏設置的colleapse判斷是否摺疊導航欄
   
   
   最後完成之後的頁面
   

containMain裏面對應的就是需要添加內容的頁面，別忘了寫上<router-view></router-view>，否則沒有渲染到。之後每在page文件夾內新增一個頁面，相應的到router裏去設置好路由就可以了。

整個項目目前只是搭建了簡單的框架，後續會慢慢的豐富。
github地址https://github.com/LonelyFarer/managerSystem

雖然渺小，依然散發光芒，希望能對您有所幫助！