vue輕量級後臺管理系統基礎模板

項目地址

vue-admin-template

在線預覽

更新

2019.10.14 更新

• 修復窗口寬度太小不會收縮側邊欄的問題
• 新增：打開頁面時，默認展開和路由對應的菜單欄

2019.8.19 修復BUG

components/Index.vue 文件第 31 行代碼的 v-show="isShowAsideTitle" 會形成側邊欄收縮時二級菜單隱藏，目前已修復。

2019.7.24 更新

增長頁面進度條

在頁面跳轉時增長進度條

2019.6.25 更新

修復路由表衝突問題

退出當前用戶，換帳號從新登錄時，上個帳號和如今的帳號路由表會有衝突的問題，解決辦法是在退出登錄時重置路由表。

具體實現請查看 router/index.js、Login.vue 和 Index.vue 的退出登錄回調方法。

2019.6.18 更新

優化動態添加路由功能

之前的動態路由功能並不完善，首先要將全部的路由都添加到路由表裏，而後根據後臺返回的菜單欄數據來生成菜單。

致使的問題就是，雖然有頁面在菜單欄上不顯示，但因爲已經添加到路由表裏了，因此能夠在地址欄上手動輸入在菜單欄上不存在（但在路由表存在）的頁面，進而能夠越權訪問。

如今除了必要的頁面須要在一開始添加到路由表裏，其餘的頁面均可以根據後臺數據來自動生成。並且菜單欄上沒有的頁面，在地址欄上輸入地址也是訪問不了的。

另外，若是在未登錄時要訪問某一指定頁面，會重定向到登錄頁，登錄成功後會自動跳到這個指定頁面。

具體實現請看 permission.js 和 util 目錄下的 index.js 文件

2019.3.14 更新

增長404頁面

假如跳轉到一個不存在的頁面時會重定向到404頁面

2019.3.8 更新

增長麪包屑功能

用於展現當前頁面的路徑

增長權限控制功能

若是未登錄，訪問全部頁面都重定向到登錄頁

2019.3.1 更新

增長動態菜單欄功能

icon使用的是iview組件的icon組件。

數據格式：

// 左側菜單欄數據
menuItems: [
    {
        name: 'Home', // 要跳轉的路由名稱 不是路徑
        size: 18, // icon大小 非必填
        type: 'md-home', // icon類型 非必填
        text: '主頁' // 文本內容
    },
    {
        text: '二級菜單',
        type: 'ios-paper',
        children: [
            {
                type: 'ios-grid',
                name: 'T1',
                text: '表格'
            },
            {
                text: '三級菜單',
                type: 'ios-paper',
                children: [
                    {
                        type: 'ios-notifications-outline',
                        name: 'Msg',
                        text: '查看消息'
                    },
                    {
                        type: 'md-lock',
                        name: 'Password',
                        text: '修改密碼'
                    },
                    {
                        type: 'md-person',
                        name: 'UserInfo',
                        text: '基本資料',
                    }
                ]
            }
        ]
    }
]

相關依賴

• vue-router
• iview
• axios
• vuex

功能

登陸頁

• 一週七天自動切換不一樣的壁紙（建議本身配置）

標籤欄

• 點擊標籤切換頁面
• 刷新當前標籤頁
• 關閉其餘標籤/關閉全部標籤

注意： 組件的名稱和路由的名稱必定要一致，例如 Home.vue 組件名稱 name: home，則在路由文件中也要給它設置爲 name: home，不然頁面內容不能緩存

// 在router文件中
{
    path: 'home',
    name: 'home',
    component: () => import('../views/Home.vue')
}

// 在Home.vue中
export default {
    name: 'home'
}

側邊欄

• 伸展/收縮
• 頁面寬度太小自動收縮
• 多級菜單（利用iView組件）

用戶相關

• 消息通知
• 用戶頭像
• 基本資料

動態菜單欄

• 根據數據動態生成菜單

麪包屑

• 展現當前頁面的路徑

權限控制

• 若是在未登錄的狀況下訪問指定頁面 將會重定向到登錄頁

其它

• 利用axios攔截器 實現了ajax請求前展現loading 請求結束關閉loading

注意

• 源碼可見 而且添加了必要的註釋 能夠自行更改

Index組件通常狀況下只須要傳數據就行 其餘不用關注

市面上有大量的vue後臺管理系統模板 可是功能都太豐富了 並且有不少組件用不上 因此寫了這麼一個最基礎的 只有必要功能的模板
UI庫使用的是iView 有大量的組件可用

子組件跳轉到子組件

// xxx爲你想跳轉的子組件name
this.$parent.gotoPage('xxx')

路由傳參

this.gotoPage('userinfo', {
    id: id,
})
// 在userinfo組件裏取參
this.$route.params.id

使用

下載

git clone git@github.com:woai3c/vue-admin-template.git

cd vue-admin-template

npm i

開發

npm run serve

打包

npm run build

若是對你有幫助，請給個Star