1:項目結構
assets目錄:放置靜態文件的地方
filtres: 放置全局過濾器的地方
pages:放置頁面
plugins: 放配置文件
- axios.js 設置axios
- check-token:操作token的地方
- element 全局註冊element的地方
- http: axios的二次封裝請求中轉處理
store: vuex存放的位置
2:多頁開發
pages下面的兩個目錄(index, user),訪問頁面就是http://localhost:8080/index.html#/+自定義路由 / http://localhost:8080/user.html#/+自定義路由
每個項目都由每個目錄下面的router,app.js, app.Vue 單獨控制
3: 環境配置
在package.json文件中配置了三個打包環境和一個本地運行環境
serve: 本地開發環境配置文件 .env.development
local: 本地打包測試環境配置文件.env.local
test: 測試打包環境配置文件.env.test
build: 線上打包環境配置文件 .env.production
VUE_APP_TOKEN_VALID_SECOND=28 token自動刷新時間
VUE_APP_NAME = base 保存token在cookie裏面前面的參數
因爲我配置這個框架的時候有些數據會在其他的地方拉。所以配置的接口地址有幾個。
登錄地址因爲全平臺統一所以寫在配置文件裏,不同的環境調不同的地址(你如果是項目內的登錄的話可以刪掉,並且把裏面引用這個地址的地方改成你自己的登錄路由)
打包地址也會根據後端的配置不同的環境不同的打包地址
4:axios的封裝
plugins/axios.js
plugins/http.js
根據你的環境配置裏面的接口地址可以一直寫下去。
回調的數據進行了全局處理,
5: 權限控制
每個頁面裏面的created事件裏面都調用了重置刷新token的一個事件
在router裏面每個跳轉之前判斷一次token是否存在,不存在就跳轉登錄。
github地址:vuecli3-elementUi-less