vue-admin-template 項目地址
在線預覽
更新日志
相關依賴
功能
登錄頁
- 一周七天自動切換不同的壁紙（建議自己配置）
標簽欄
- 點擊標簽切換頁面
- 刷新當前標簽頁
- 關閉其他標簽/關閉所有標簽
注意： 組件的名稱和路由的名稱一定要一致，例如 Home.vue 組件名稱 name: home，則在路由文件中也要給它設置為 name: home，否則頁面內容不能緩存
// 在router文件中
{
path: 'home',
name: 'home',
component: () => import('../views/Home.vue')
}
// 在Home.vue中
export default {
name: 'home'
}
側邊欄
- 伸展/收縮
- 頁面寬度過小自動收縮
- 多級菜單（利用iView組件）
用戶相關
- 消息通知
- 用戶頭像
- 基本資料
動態菜單欄
- 根據數據動態生成菜單
- 在菜單項上添加 hidden 屬性可以隱藏該菜單項，但還是可以正常訪問頁面，具體請看 DEMO 及其相關代碼
面包屑
- 展示當前頁面的路徑
權限控制
- 如果在未登陸的情況下訪問指定頁面 將會重定向到登陸頁
eslint + vscode 自動格式化代碼
具體配置方法請點擊上面的鏈接，如果不需要 eslint，請將相關依賴卸載以及根目錄下的 .eslintrc.js 刪除。
jest 單元測試
如果不需要，請卸載相關依賴及刪除根目錄下的 tests 目錄
頁面標題 document.title
在 src/utils/index 下可設置默認的 title，在每個路由配置項上可設置對應的 title，具體示例請看代碼
其它
- 利用
axios攔截器 實現了ajax請求前展示loading請求結束關閉loading
注意
- 源碼可見 並且添加了必要的注釋 可以自行更改
Index組件一般情況下只需要傳數據就行 其他不用關注
市面上有大量的vue后台管理系統模板 但是功能都太豐富了 而且有很多組件用不上 所以寫了這么一個最基礎的 只有必要功能的模板
UI庫使用的是iView 有大量的組件可用
使用
下載
git clone https://github.com/woai3c/vue-admin-template.git
cd vue-admin-template
npm i
開發
npm run serve
打包
npm run build
打包后的文件要放在服務器根目錄下，否則會出現空白頁面。
如果不是服務器根目錄則需要更改打包的路徑，打開 vue.config.js 文件，添加如下代碼
publicPath: './',
添加后如下所示
module.exports = {
publicPath: './',
devServer: {
proxy: {
'/api': {
target: 'http://xxxx/device/', //對應自己的接口
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}