vue2 admin

vue2-admin

體驗地址：vue2-admin
帳號：admin 密碼：admin
遇到BUG 或有更好的實現方式歡迎聯絡我（有程式碼不理解的地方也可以寄email給我詢問）。信箱：[email protected]

vue2版本github位址：vue2-admin
另外有gitee倉庫，只要將上方連結位址中的github修改為gitee便可。

---

包含功能

1.首屏載入loading 動畫
2.axios 封裝
3.router 權限控制
4.根據權限動態產生側邊導覽列
5.登入邏輯
6.dashboard 頁面佈局
8.基於el-tooltip二次封裝的元件，只有當超出長度後才會顯示tooltip,支援el-tooltip所有屬性9.基於el-table二次封裝的元件，支援el-table所有屬性，並且支援分頁10.基於el-icon二次封裝的icon選擇組件11.token無感刷新功能

---

vue2+element+axios 後台模板

不對功能做過度封裝，只提供基礎的頁框和路由結構，其餘功能完全交由使用之自行開發。

引入mock，方便前後端分離開發。

關於mockjs

為了效果展示，本人在正式環境中也使用了mock.js 產生測試資料。但是正式版本是不會使用的！

在正式使用時請在中斷中執行

 npm uninstall mockjs --save

如果在開發過程中需要測試數據，請執行下面的指令在開發環境中安裝mockjs

 npm install mockjs -D

---

對axios 進行封裝

在utils/request.js 中可以設定請求頭，可以依照自己的實際情況進行修改

將請求的基礎url 設定在utils/setting.js中的api

通用環境為.env

開發環境為.env.development

生產環境為.env.production

環境變數優先權.env.production = .env.development > .env

在專案src 目錄下含有api 資料夾，然後在其中新user.js 文件，這個文件是主要書寫API 的封裝過程。

在使用時推薦將一類介面放在同一個文件下，方便我們進行調試和統一管理

如果採用@/api/user.js 格式，在使用時先引入。例如我在@/component/login.vue 中首先引入文件

 import { loginApi } from "@/api/user"
login ( ) {
  let data = this . ruleForm
  loginApi ( data ) . then ( res => {
    console . log ( res )
  } )
} 

---

router 權限控制

根據介面傳回的資料動態產生路由，並根據介面資料產生導覽欄

在@/router/beforEach.js 中含有路由守衛，基礎的路由守衛已經添加，若還要實現其餘功能（如：進行過某個操作後才能進入某個頁面）可以在router/beforEach.js 內的Selfexecution 函數內會新增對應邏輯。

文字根據路由產生側邊導航

在@/router/beforEach.js 中meta 屬性中配置側邊欄的icon，title，hidden。當hidden:true 時側邊導覽列不顯示。

側邊欄顏色可以修改utils/setting 中theme 的aside_color 和aside_rext_color

---

VUEX

將vuex 模組化，登入和權限控制單獨放在一個模組下

防止vuex 資料刷新遺失，引入vuex-persistedstate

 // 为了防止刷新页面vuex中的数据丢失，可以选择性地将数据存入sessionstorage中，防止丢失
plugins: [ createPersistedState ( {
    storage : window . sessionStorage ,
    reducer ( val ) {
        return {
        // 只储存state中的isPC
        isPC : val . user . isPC
        }
    }
} ) ]

為了防止使用者手動修改sessionstorage，新增了監聽事件

 window . addEventListener ( 'storage' , function ( e ) {
    sessionStorage . setItem ( e . key , e . oldValue )
} ) ; 

---

按鈕節流

新增了基礎的按鈕節流程式碼,在button 上綁定v-preventReClick 即可。

 // button节流，在button中添加v-preventReClick即可控制按钮，防止按钮连击，时间限制2s
Vue . directive ( "preventReClick" , {
    inserted ( el , binding ) {
      el . addEventListener ( "click" , ( ) => {
        if ( el . style . pointerEvents !== "none" ) {
          el . style . pointerEvents = "none"
          setTimeout ( ( ) => {
            el . style . pointerEvents = ""
          } , 2000 )
        }
      } )
    }
} ) 

---

初始包含頁面

登入頁面、

密碼找回頁面、

404 頁、

Home 頁

---

使用準備

 npm uninstall mockjs --save

npm install mockjs -D

npm install

啟動專案

 npm run serve

專案打包

 npm run build

程式碼格式化

 npm run lint

docker

 docker build -t vue-admin . --no-cache