src文件夹
src 目录指的是源代码目录，存放项目应用的源代码，包含项目的逻辑和功能实现，实际上线之后在浏览器中跑的代码就是它们
-
apis - 业务接口
-
assets - 静态资源 （图片）
-
components - 组件 公共组件
-
constants - 常量 （不需要变动的数据）
-
directive - 全局指令 --- （指令是用于在模板中将 DOM 元素绑定到底层 Vue 实例的数据的一种特殊标记，如
v-model、v-for、v-if） -
icons - 图标 （png svg 字体图标）
-
Layout - 搭建项目的架子 -- 布局
-
utils - 工具函数 （转化函数 校验函数 请求request）
-
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 "提交说明"