溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue后臺管理系統的布局

發布時間:2020-06-12 16:47:07 來源:網絡 閱讀:4204 作者:渺小的星 欄目:開發技術

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

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

再在src文件夾內新建一個page文件夾,在里面按照需求新建文件,用于書寫頁面,新建文件完成之后,大致的目錄結構如下圖
vue后臺管理系統的布局
在home.vue頁面內導入header.vue,slider.vue等相關的布局組件

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

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

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

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

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

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女