首先新建一個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,後面會用到
- slide.vue
能夠動態的獲取路由,點擊左側導航能跳轉到對應的界面 - 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
雖然渺小,依然散發光芒,希望能對您有所幫助!