在線預(yù)覽

更新日志

相關(guān)依賴

• vue-router
• iview
• axios
• vuex

功能

登錄頁

• 一周七天自動切換不同的壁紙（建議自己配置）

標(biāo)簽欄

• 點(diǎn)擊標(biāo)簽切換頁面
• 刷新當(dāng)前標(biāo)簽頁
• 關(guān)閉其他標(biāo)簽/關(guān)閉所有標(biāo)簽

注意： 組件的名稱和路由的名稱一定要一致，例如 Home.vue 組件名稱 name: home，則在路由文件中也要給它設(shè)置為 name: home，否則頁面內(nèi)容不能緩存

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

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

側(cè)邊欄

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

用戶相關(guān)

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

動態(tài)菜單欄

• 根據(jù)數(shù)據(jù)動態(tài)生成菜單
• 在菜單項(xiàng)上添加 hidden 屬性可以隱藏該菜單項(xiàng)，但還是可以正常訪問頁面，具體請看 DEMO 及其相關(guān)代碼

面包屑

• 展示當(dāng)前頁面的路徑

權(quán)限控制

• 如果在未登陸的情況下訪問指定頁面 將會重定向到登陸頁

eslint + vscode 自動格式化代碼

具體配置方法請點(diǎn)擊上面的鏈接，如果不需要 eslint，請將相關(guān)依賴卸載以及根目錄下的 .eslintrc.js 刪除。

jest 單元測試

如果不需要，請卸載相關(guān)依賴及刪除根目錄下的 tests 目錄

頁面標(biāo)題 document.title

在 src/utils/index 下可設(shè)置默認(rèn)的 title，在每個路由配置項(xiàng)上可設(shè)置對應(yīng)的 title，具體示例請看代碼

其它

• 利用axios攔截器 實(shí)現(xiàn)了ajax請求前展示loading 請求結(jié)束關(guān)閉loading

注意

• 源碼可見 并且添加了必要的注釋 可以自行更改

Index組件一般情況下只需要傳數(shù)據(jù)就行 其他不用關(guān)注

市面上有大量的vue后臺管理系統(tǒng)模板 但是功能都太豐富了 而且有很多組件用不上 所以寫了這么一個最基礎(chǔ)的 只有必要功能的模板 UI庫使用的是iView 有大量的組件可用

使用

下載

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

cd vue-admin-template

npm i

開發(fā)

npm run serve

打包

npm run build

打包后的文件不能放在服務(wù)器根目錄，否則會出現(xiàn)空白頁面。

如果確實(shí)要把文件放在服務(wù)器根目錄則需要更改打包的路徑，打開 vue.config.js 文件，將如下代碼刪去即可。

publicPath: './',