熟悉vue-admin

熟悉vue-admin

**核心交付:** 为什么要基于现成架子二次开发
什么是二次开发：基于已有的代码（项目工程，脚手架）开进行新功能的开发
以是看懂已有的框架中的既有代码，变得很重要了
1. 背景知识

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

• 页面团体结构相似（Sidebar + Navbar + Main经典结构）
  

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

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

既然这么多一样的地方，有必要每次开发背景管理体系，都重新创建一套吗？
2. vue-admin

vue-admin是基于vue-admin-template做了一些升级和改版之后的背景管理体系脚手架，内置了必要的安装包、目次结构划分、路由表设计等等，方便做二次开发，我们需要做的大部门是 填空题 ，架子搭建部门工作通常由团队Leader来做
执行下面下令，克隆脚手架到本地，并安装依赖运行

1. # 克隆项目
2. git clone http://git.itcast.cn/heimaqianduan/vue-admin.git
4. # 安装依赖
5. npm i
7. # 启动项目
8. npm run start

复制代码

熟悉项目目次

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

说明：

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

利益：1. 维护方便 2. 语义化

• 
  
  • apis - 业务接口
    
  
  

• 
  
  • assets - 静态资源 （图片）
    
  
  

• 
  
  • components - 组件 公共组件
    
  
  

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

• 
  
  • directive - 全局指令
    
  
  

• 
  
  • icons - 图标 （png svg 字体图标）
    
  
  

• 
  
  • Layout - 搭建项目的架子
    
  
  

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

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

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

熟悉项目关键文件

1. 包文件 - package.json

**核心交付:** 拿到一个新项目之后，重点关注包文件中的哪些东西
项目包管理文件，我们重点关注 项目依赖 和 可执行下令 两部门

1.   "scripts": {
2.     "dev": "vue-cli-service serve",
3.     "build": "vue-cli-service build",
4.     "report": "vue-cli-service build --report"
5.   },
6.   "dependencies": {
7.     "axios": "^0.18.1",
8.     "core-js": "^3.30.0",
9.     "element-ui": "2.13.2",
10.     "js-cookie": "^2.2.0",
11.     "normalize.css": "7.0.0",
12.     "vue": "2.6.10",
13.     "vue-router": "^3.6.5",
14.     "vuex": "3.1.0"
15.   },
16.   "devDependencies": {
17.     "@vue/cli-plugin-babel": "4.4.4",
18.     "@vue/cli-plugin-eslint": "4.4.4",
19.     "@vue/cli-service": "4.4.4",
20.     "autoprefixer": "9.5.1",
21.     "babel-eslint": "10.1.0",
22.     "babel-plugin-dynamic-import-node": "2.3.3",
23.     "chalk": "2.4.2",
24.     "connect": "3.6.6",
25.     "eslint": "6.7.2",
26.     "eslint-plugin-vue": "6.2.2",
27.     "html-webpack-plugin": "3.2.0",
28.     "runjs": "4.3.2",
29.     "sass": "^1.49.10",
30.     "sass-loader": "10",
31.     "script-ext-html-webpack-plugin": "2.1.3",
32.     "serve-static": "1.13.2",
33.     "svg-sprite-loader": "^6.0.11",
34.     "vue-template-compiler": "2.6.10"
35.   }

复制代码

说明：

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

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

为什么要把包添加到依赖项里面？
协同开发的时候保证团队里的所有人用到包都是一致的
2. 应用入口 - main.js

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

3. 组件树 - App.vue

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

4. 路由文件 - vueRouter

**核心交付:** 可以或许理清楚一级和二级路由的不同配置写法，可以或许自己新增路由
只有一级路由的配置写法

1.   {
2.     path: '/workbench',
3.     component: Layout,
4.     children: [{
5.       path: '', // 地址为空
6.       name: 'workbench',
7.       component: () => import('@/views/workbench/index'),
8.       meta: { title: '工作台', icon: 'el-icon-eleme' }
9.     }]
10.   }

复制代码

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

1. {
2.     path: '/park',
3.     component: Layout,
4.     name: 'park',
5.     meta: { title: '园区管理', icon: 'el-icon-office-building' },
6.     children: [{
7.       path: 'building',
8.       name: 'building',
9.       meta: { title: '楼宇管理' },
10.       component: () => import('@/views/Park/Building/index')
11.     },
12.     {
13.       path: 'enterprise',
14.       name: 'enterprise',
15.       meta: { title: '企业管理' },
16.       component: () => import('@/views/Park/Enterprise/index')
17.     }]
18.   }

复制代码

路由配置练习
配置要求：

• icon el-icon-wallet
  

• title名称 物业费管理
  

5. 状态管理 - Vuex

**核心交付:** 可以或许知道基于模块化管理的集中状态管理

请求模块说明

request.js模块说明

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

1. import axios from 'axios'
2. const service = axios.create({
3.   baseURL: 'https://api-hmzs.itheima.net/tj',
4.   timeout: 5000 // request timeout
5. })
6. // 请求拦截器
7. service.interceptors.request.use(
8.   config => {
9.     return config
10.   },
11.   error => {
12.     return Promise.reject(error)
13.   }
14. )
16. // 响应拦截器
17. service.interceptors.response.use(
18.   response => {
19.     return response.data
20.   },
21.   error => {
22.     return Promise.reject(error)
23.   }
24. )
26. export default service

复制代码

总结说明：

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

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

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

apis模块说明

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

2- 底子封装逻辑

1. import request from '@/utils/request'
3. // 登录函数
4. /**
5. * @description: 登录函数
6. * @param {*} data { mobile,password}
7. * @return {*} promise
8. */
9. export function login({ mobile, password }) {
10.   return request({
11.     url: '/sys/login',
12.     method: 'POST',
13.     data: {
14.       mobile,
15.       password
16.     }
17.   })
18. }

复制代码

总结说明：

• apis中的所有业务函数都采用同样的封装逻辑（参数格式/返回值格式），方便维护
  

• apis中的所有业务函数内部都采用request.js中统一导出的axios实例达到配置一次，管控所有接口的目的
  

路由和菜单的关系

路由表是菜单的数据支持

路由对象的属性和菜单显示对应

说明：

• 菜单通过遍历路由表来显示，路由表作为数据泉源
  

• 路由对象meta属性中的icon决定了显示的图表，title决定了要显示的标题
  

利用Git管理项目

**核心交付:** 养成git管理项目的习惯

• 删除原有的.git文件，堵截和原本长途仓库的链接
  

• 重新执行 git init . 下令, 初始化本地仓库
  

• 在gitee上新增长途仓库
  

• 关联长途仓库到本地
  

• 推送本地到长途
  

• 后续一样平常提交 git add .  git commit -m "提交说明"
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。