- 下載element-admin框架
點擊該地址：https://github.com/PanJiaChen/vue-element-admin
用git clone https://github.com/PanJiaChen/vue-element-admin或者直接下載壓縮包都可以
2.安裝依賴
打開項目根目錄，在根目錄下使用npm install 安裝依賴，這種方式可能耗時較長，可采用鏡像安裝npm install --registry=https://registry.npm.taobao.org。在這里我用webstorm做開發工具演示。
安裝完成后，會在此生成一個依賴文件夾
3.修改配置
最新版本生成的項目的配置文件沒有了config文件夾，配置文件主要放在了vue.config.js里面，簡單介紹一下重點的配置：
現在打開vue.config.js修改里面的配置
現在后台接口修改完成，那么如何登陸成功呢？接下來找到view->login->index.vue找到登錄方法，可以看到在該方法里調用了store里面的login方法，
再來，找到store->modules->user.js文件，找到login方法，可以看到在方法里面調用了login接口，按住ctrl鍵點擊login會跳轉到該接口的文件
在這里可以看到請求登錄接口是用的一個封裝好的request請求，該文件里面包含了請求攔截和響應攔截，現在我們打開這個request文件看一下里面的邏輯。
攔截請求，先判斷store里面是否有token,如果沒有直接返回原config對象，login接口請求攔截解除，繼續調接口，接口請求成功后，回到store的login方法里面走then,將獲取到的response展開處理,給store的state設置token值（以便后期請求攔截時從store中直接獲取token進而來判斷是否要在header中添加‘X-Token’驗證。為什么不直接用cookie中的token呢？這個問題在官網中有講解過，在這順便簡單介紹一下：如果在A台電腦上登錄了，在B台電腦上也登陸，同時，在B台電腦上修改了個人信息，此時A台電腦的用戶信息是從緩存中取出來的，所以仍然是修改之前的信息，除非退出登錄），同時給cookie中的'Admin-Token’設值。緊接着store的login方法結束之后回到index.vue的登錄方法，然后開始路由跳轉。路由跳轉也添加了攔截，在該攔截里，會根據緩存中的token去判斷，如果有token且路由是/login，直接放行，如果沒有token,在白名單里直接跳，不在白名單里調到登錄頁,如果有token且不是/login則去store里獲得角色信息
回到路由攔截的permission.js文件，拿到用戶角色roles，將其傳遞給store的生成路由配置的方法（生成左側菜單欄）
判斷角色是否是admin如果是，會將常量路由和權限路由全部添加並返回，如果是其他權限，會根據權限篩選返回
4.給新添加的頁面配置權限
以上就是一個基本的流程邏輯，結束嘍~