做网站导航,网站建设:化工,wordpress 免费版,安徽省建设工程信息网怎么打不开了认识vue-admin
**核心交付:** 为什么要基于现成架子二次开发
什么是二次开发#xff1a;基于已有的代码#xff08;项目工程#xff0c;脚手架#xff09;开进行新功能的开发
所以看懂已有的框架中的既有代码#xff0c;变得很重要了
1. 背景知识 后台管理系统是一种最…认识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. 语义化 apis - 业务接口 assets - 静态资源 图片 components - 组件 公共组件 constants - 常量 不需要变动的数据 directive - 全局指令 icons - 图标 png svg 字体图标 Layout - 搭建项目的架子 utils - 工具函数 转化函数 校验函数 请求request 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}})
}总结说明
apis中的所有业务函数都采用同样的封装逻辑参数格式/返回值格式方便维护
apis中的所有业务函数内部都采用request.js中统一导出的axios实例达到配置一次管控所有接口的目的
路由和菜单的关系
路由表是菜单的数据支撑 路由对象的属性和菜单显示对应 说明
菜单通过遍历路由表来显示路由表作为数据来源
路由对象meta属性中的icon决定了显示的图表title决定了要显示的标题
使用Git管理项目
**核心交付:** 养成git管理项目的习惯
删除原有的.git文件切断和原本远程仓库的链接
重新执行 git init . 命令, 初始化本地仓库
在gitee上新增远程仓库
关联远程仓库到本地
推送本地到远程
后续日常提交 git add . git commit -m 提交说明
