黑马智数Day1

src文件夹

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

1. apis - 业务接口

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

3. components - 组件 公共组件

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

5. directive - 全局指令 --- （指令是用于在模板中将 DOM 元素绑定到底层 Vue 实例的数据的一种特殊标记，如 v-model、v-for、v-if）

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

7. Layout - 搭建项目的架子 -- 布局

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

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

包文件 - package.json

可执行命令

项目依赖

开发和生产都需要：

仅在开发时需要：

应用入口 - main.js

组件树 - App.vue

路由文件 - 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')}]}

状态管理 - Vuex

• Vuex 将应用程序的状态集中存储在一个对象中，称为状态树（store）。
• Vuex 规定只有通过提交 mutation（同步操作）来更改状态。Mutation 是一种特殊函数，用于更改 store 中的状态。
• 虽然 mutation 必须是同步的，但可以通过 action 来处理异步操作。Action 类似于 mutation，但它负责提交 mutation 而不是直接变更状态，这使得你可以在 action 中执行异步操作。
• 为了更好地组织代码，Vuex 允许将 store 分割成模块。每个模块拥有自己的 state、mutations、actions 和 getters，使得状态管理更加模块化和清晰。

请求模块说明

request.js模块说明

import axios from 'axios'
const service = axios.create({baseURL: 'https://api-hmzs.itheima.net/v1',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模块说明

 基础封装逻辑：

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

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

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

路由和菜单的关系

路由表是菜单的数据支撑

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

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

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

使用Git管理项目

• 删除原有的.git文件，切断和原本远程仓库的链接

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

• 在gitee上新增远程仓库

• 关联远程仓库到本地

• 推送本地到远程

• 后续日常提交 git add . git commit -m "提交说明"