先看下頁面截圖，在線演示地址http://aliadmin.zengjielin.top
下面有開源的代碼
頁面分成三大部分頭部，頭部菜單欄，側邊菜單欄，右側內容欄。
現在我們擔心的是怎么使用側邊欄。
我們先克隆我們的項目到本地
然后進入我們的項目，安裝項目依賴
運行我們的項目,然后瀏覽器打開http://localhost:8080/#/
我們打開編譯器，只需要修改下面數據即可以為你們項目所用了
我們打開CloudSideBar.vue的一個文件，修改data()里面的數據
結合頁面效果，你們仔細觀察一下就知道怎么寫了，這里我就不做太多描述。
現在修改menuArr的內容就可以達到你們自己的列表了，注意一下幾點，給菜鳥的警告。
menuList里面的元素必須包含main_menu_id,而且必須從0開始，每一個元素遞增。
然后submenuList里面的元素必須包含submenuID,而且必須1開始，每一個元素遞增。
以上幾點必須注意，否則不發達到效果。
附上碼雲托管的開源項目代碼：https://gitee.com/zengjielin/aliyun_admin
關於項目用的圖標，我是用了阿里巴巴圖標庫的圖標
下面可以教一下你們使用，
進入阿里巴巴圖標庫網站http://www.iconfont.cn/
然后搜索你想要的圖標
然后選一個你需要的圖標加入個購物車
然后我們去到右上角找到購物車的圖標將我們的圖標放到項目上
然后我們會跳到我們圖標所在的項目中，注意紅色框框的部分，一個是fontclass,我們要選中它，然后圖標的下方會出現一些ico-開頭的一些類名，我們要用到。
然后是另外一個叫我們更新代碼，我們點擊它。
會生成新的連接，我們復制連接到我們本地項目的index.html下，就可以了。
然后我們把對應的圖標寫在下面紅色框框的地方即可。
項目是開源的，可以隨便玩，轉發請標注原著，尊重作者。