根據(jù)登錄用戶的角色诗充，生成路由后addRoute欲险、生成菜單欄基本思路：
????1. 用戶在登錄頁輸入 用戶名+密碼 請(qǐng)求后端?login接口?拿到?token?后保存到cookie或sessionStorage中恩掷；
????2. 接著攜帶拿到的token請(qǐng)求后端?userInfo?接口津函，獲得用戶基本信息及角色role本辐；
????3. 前端維護(hù)路由表憔杨，除了不需要權(quán)限限定的頁面外其余每個(gè)路由添加meta數(shù)據(jù)，格式如?meta:{ role:['admin'] }淤毛，表示該路由頁面可以被哪些角色訪問今缚；
????4. 用userInfo接口拿到的role數(shù)據(jù)，過濾出路由表中低淡，當(dāng)前用戶能訪問的路由并保存到Vuex中姓言，使用 Vue-Router的 addRoute API循環(huán)添加路由；
????5. 菜單欄使用了 ElementUI 的?NavMenu 導(dǎo)航菜單組件蔗蹋，拿到Vuex保存的路由數(shù)據(jù)循環(huán)即可何荚，因?yàn)椴藛慰赡苡卸鄠€(gè)層級(jí)，使用了組件遞歸猪杭。
本地環(huán)境：
????Windows10系統(tǒng)餐塘、Node 16.8、Vue CLI 4.5.13
基本流程：
? ? 1. 使用 Vue Cli 腳手架創(chuàng)建項(xiàng)目皂吮、安裝依賴
打開終端輸入?vue create vue-admin-simple回車戒傻，使用方向鍵選擇 "Manually select features" 自定義選擇項(xiàng)目需要使用的依賴；
????????選中 Manually select features 后回車蜂筹，(方向鍵上下選擇需纳，按空格鍵選中和取消選中)，選中“Router”和“Vuex”后回車(測試項(xiàng)目中使用了Vuex來保存路由和用戶信息)艺挪；
????????回車后讓選擇vue版本（這里先用2.x版本不翩，后面再寫3.x版本記錄）、路由是否使用History模式麻裳、ESLint配置口蝠、何時(shí)用ESLint格式化、是否把babel和ESLint等的配置項(xiàng)保存到各自的單獨(dú)配置文件中還是保存到package.json中津坑、是否不保存為預(yù)設(shè)配置 這幾步可以依次回車默認(rèn)選擇即可妙蔗，也可以根據(jù)自己習(xí)慣及項(xiàng)目需要修改選擇。
????????之后回車即開始安裝項(xiàng)目依賴了国瓮。等待依賴下載完成即可進(jìn)入項(xiàng)目運(yùn)行查看灭必。
2. 進(jìn)入項(xiàng)目目錄啟動(dòng)項(xiàng)目、使用VSCode打開項(xiàng)目編輯
終端中繼續(xù)輸入?cd vue-admin-simple?回車后乃摹， 運(yùn)行?yarn serve開始編譯項(xiàng)目。編譯完成在瀏覽器地址欄輸入?localhost:8080?回車查看項(xiàng)目跟衅。
下篇文章繼續(xù)記錄生成測試頁面和路由孵睬，實(shí)現(xiàn)靜態(tài)登錄及基本頁面布局layout。
