当前位置：首页 > article >正文

认识vue-admin

article 2025/2/20 19:23:20

认识vue-admin

**核心交付:** 为什么要基于现成架子二次开发

什么是二次开发：基于已有的代码（项目工程，脚手架）开进行新功能的开发

所以看懂已有的框架中的既有代码，变得很重要了

1. 背景知识

后台管理系统是一种最常见的应用模式，不同的管理系统之间有很多相似的地方，比如：

页面整体结构相似（Sidebar + Navbar + Main经典布局）

技术选型相似（Vue.js + VueRouter + Vuex + Axios...）

业务类型相似（CRUD + 导入导出 + 权限管理...）

既然这么多一样的地方，有必要每次开发后台管理系统，都重新创建一套吗？

2. vue-admin

vue-admin是基于vue-admin-template做了一些升级和改版之后的后台管理系统脚手架，内置了必要的安装包、目录结构划分、路由表设计等等，方便做二次开发，我们需要做的大部分是 填空题 ，架子搭建部分工作通常由团队Leader来做

执行下面命令，克隆脚手架到本地，并安装依赖运行

# 克隆项目
git clone http://git.itcast.cn/heimaqianduan/vue-admin.git

# 安装依赖
npm i

# 启动项目
npm run start

熟悉项目目录

**核心交付:** 熟悉项目的目录结构设计

说明：

src 目录指的是源代码（source code）目录，存放项目应用的源代码，包含项目的逻辑和功能实现，实际上线之后在浏览器中跑的代码就是它们

好处：1. 维护方便 2. 语义化

1. apis - 业务接口

1. assets - 静态资源（图片）

1. components - 组件公共组件

1. constants - 常量（不需要变动的数据）

1. directive - 全局指令

1. icons - 图标（png svg 字体图标）

1. Layout - 搭建项目的架子

1. utils - 工具函数（转化函数校验函数请求request）

1. views - 页面级组件路由级别组件业务组件

src 之外的目录和文件多数是项目的配置文件，包括babel配置，脚手架配置，环境变量配置等等

熟悉项目关键文件

1. 包文件 - package.json

**核心交付:** 拿到一个新项目之后，重点关注包文件中的哪些东西

项目包管理文件，我们重点关注 项目依赖 和 可执行命令 两部分

  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "report": "vue-cli-service build --report"
  },
  "dependencies": {
    "axios": "^0.18.1",
    "core-js": "^3.30.0",
    "element-ui": "2.13.2",
    "js-cookie": "^2.2.0",
    "normalize.css": "7.0.0",
    "vue": "2.6.10",
    "vue-router": "^3.6.5",
    "vuex": "3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "autoprefixer": "9.5.1",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "2.4.2",
    "connect": "3.6.6",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "html-webpack-plugin": "3.2.0",
    "runjs": "4.3.2",
    "sass": "^1.49.10",
    "sass-loader": "10",
    "script-ext-html-webpack-plugin": "2.1.3",
    "serve-static": "1.13.2",
    "svg-sprite-loader": "^6.0.11",
    "vue-template-compiler": "2.6.10"
  }

说明：

可执行命令配置 script中包含了所有可执行的项目命令，包括启动开发服务，打包等等，这些命令可以定制

依赖项（dependencies ）对比开发依赖项（devDependencies）在开发时注意要把当前包安装到对应的依赖项中
|
| npm下载方式 | 作用 |
| --- | --- | --- |
| 依赖项（dependencies ） | npm i dayjs | 和业务代码相关，参与打包 |
| 开发依赖（devDependencies） | npm i sass -D | 提供开发环境下的工程化支持，不参与打包 |

为什么要把包添加到依赖项里面？

协同开发的时候保证团队里的所有人用到包都是一致的

2. 应用入口 - main.js

**核心交付:** 知道入口文件中都做了哪些重要的事情

3. 组件树 - App.vue

**核心交付:** 能够从组件树的角度理清楚各级组件是如何渲染出来的

4. 路由文件 - vueRouter

**核心交付:** 能够理清楚一级和二级路由的不同配置写法，能够自己新增路由

只有一级路由的配置写法

  {
    path: '/workbench',
    component: Layout,
    children: [{
      path: '', // 地址为空
      name: 'workbench',
      component: () => import('@/views/workbench/index'),
      meta: { title: '工作台', icon: 'el-icon-eleme' }
    }]
  }

同时拥有一级和二级路由的配置写法

{
    path: '/park',
    component: Layout,
    name: 'park',
    meta: { title: '园区管理', icon: 'el-icon-office-building' },
    children: [{
      path: 'building',
      name: 'building',
      meta: { title: '楼宇管理' },
      component: () => import('@/views/Park/Building/index')
    },
    {
      path: 'enterprise',
      name: 'enterprise',
      meta: { title: '企业管理' },
      component: () => import('@/views/Park/Enterprise/index')
    }]
  }

路由配置练习

配置要求：

icon el-icon-wallet

title名称 物业费管理

5. 状态管理 - Vuex

**核心交付:** 能够知道基于模块化管理的集中状态管理

请求模块说明

request.js模块说明

**核心交付:** 基于axios的基础封装都做了什么

import axios from 'axios'
const service = axios.create({
  baseURL: 'https://api-hmzs.itheima.net/tj',
  timeout: 5000 // request timeout
})
// 请求拦截器
service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

总结说明：

一般项目中多数的接口使用的配置是相似的，所以需要统一配置一次

请求拦截器主要做的事情是在请求发送之前，针对请求参数对象做一些事情（比如添加鉴权Token）

响应拦截器主要做的事情是在响应数据返回到业务方之前，针对响应对象做一些事情（比如简化data，错误处理等）

apis模块说明

**核心交付:** 能够知道APIS模块里的业务接口函数是如何封装以及如何使用
1- 按业务模块划分

2- 基础封装逻辑

import request from '@/utils/request'

// 登录函数
/**
 * @description: 登录函数
 * @param {*} data { mobile,password}
 * @return {*} promise
 */
export function login({ mobile, password }) {
  return request({
    url: '/sys/login',
    method: 'POST',
    data: {
      mobile,
      password
    }
  })
}

总结说明：