動態加載菜單 之前我們的導航樹都是寫死在頁面里的，而實際應用中是需要從后台服務器獲取菜單數據之后動態生成的。 我們在這里就用上一篇准備好的數據格式Mock出模擬數據，然后動態生成我們的導航菜單。 接口模塊化 我們向來講究模塊化，之前接口都集中在，interface.js，我們現在把它改名 ...

組件封裝 為了避免組件代碼的臃腫，這里對主要的功能部件進行封裝，保證代碼的模塊化和簡潔度。 組件結構 組件封裝重構后，試圖組件結構如下圖所示 代碼一覽 Home組件被簡化，包含導航、頭部和主內容三個組件。 Home.vue HeadBar.vue ...

導入項目 打開 Visual Studio Code，File --> add Folder to Workspace，導入我們的項目。 安裝 Element 安裝依賴 Element 是國內餓了么公司提供的一套開源前端框架，簡潔優雅，提供了 vue、react、angular ...

作者：朝雨憶輕塵出處：https://www.cnblogs.com/xifengxiaoma/ 權限控制方案 既然是后台權限管理系統，當然少不了權限控制啦，至於權限控制，前端方面當然就是對頁面資源的訪問和操作控制啦。 前端資源權限主要又分為兩個部分，即導航菜單的查看權限和頁面增刪改操作 ...

權限控制方案 既然是后台權限管理系統，當然少不了權限控制啦，至於權限控制，前端方面當然就是對頁面資源的訪問和操作控制啦。 前端資源權限主要又分為兩個部分，即導航菜單的查看權限和頁面增刪改操作按鈕的操作權限。 我們的設計把頁面導航菜單和頁面操作按鈕統一存儲在菜單數據庫表中，菜單表中包含以下權限 ...

使用 Vuex 管理應用狀態 1. 引入背景 像先前我們是有導航菜單欄收縮和展開功能的，但是因為組件封裝的原因，隱藏按鈕在頭部組件，而導航菜單在導航菜單組件，這樣就涉及到了組件收縮狀態的共享問題。收縮展開按鈕觸發收縮狀態的修改，導航菜單需要根據收縮狀態來設置導航欄的寬度。這樣就需要在收縮狀態 ...

國際化支持 1.安裝依賴 執行以下命令，安裝 i18n 依賴。 2.添加配置 2.1 在 src 下新建 i18n 目錄，並創建一個 index.js。 in ...

用戶管理模塊 添加接口 在 http/moduls/user.js 中添加用戶管理相關接口。 模擬數據 在 mock/moduls/user.js 中添加用戶管理相關mock接口。 提取根路徑 為了可以統一控制mock的開啟與關閉，把mock的根路徑提取 ...