# 运行命令

- npm install
- npm run dev



刚接手一个Vue项目时，建议按照**「从宏观到细节，从入口到分支」**的顺序逐步拆解，以下是具体的代码阅读路径和优先级：


### **一、先看项目骨架（1-2小时）**
1. **入口文件**（必看）
    - `src/main.ts`：Vue实例初始化、全局插件（VueRouter/Vuex/Pinia）、路由/状态/组件的全局注册。
    - 关注：引入了哪些第三方库（如Element-UI、Axios）？是否有全局指令/混入？

2. **路由配置**（`src/router/index.ts`）
    - 看`routes`数组：标注了`meta.title`的页面名称（理解功能模块），`children`嵌套（多级路由结构），`component`对应的页面路径（如`views/Home.vue`）。
    - 技巧：通过路由懒加载注释（`() => import('@/views/xxx')`）快速定位核心页面。

3. **状态管理**（`src/stores`）
    - 看`index.ts`或各模块（如`user.js`、`app.js`）：全局状态的定义、mutation/actions逻辑（影响数据流向）。
    - 重点：哪些状态被多个页面共享？是否有复杂的异步逻辑（如登录状态、权限控制）？


### **二、再看核心页面（2-4小时）**
1. **首页/主入口页**（如`views/Home.vue`或`Layout.vue`）
    - 结构：页面布局（NavBar、Sidebar、Content）、路由视图`<router-view/>`的位置。
    - 逻辑：生命周期钩子（`mounted`中是否有数据请求）、与状态管理的交互（`this.$store.state.user`）。

2. **高频操作页**（如列表页、表单页）
    - 列表页（如`views/list/TableList.vue`）：看`data`中的表格数据、`methods`中的接口调用（`getList()`）、分页逻辑。
    - 表单页（如`views/form/EditForm.vue`）：看`v-model`绑定的字段、提交验证（`rules`）、与后端的交互（`this.$axios.post`）。

3. **公共布局**（`src/layout`）
    - 全局头部、侧边栏、面包屑导航的实现，可能包含权限控制（如根据角色显示菜单）。


### **三、深入细节（按需求）**
1. **公共组件**（`src/components`）
    - 高频复用组件（如`BaseTable`、`SelectDict`）：看`props`定义（组件如何接收参数）、`$emit`事件（父组件如何响应）。
    - 示例：一个`DictSelect`组件可能通过`prop: dictCode`接收字典类型，通过`@change`传递选中值。

2. **工具函数**（`src/utils`或`helpers`）
    - 看`request.js`（axios封装）：拦截器逻辑（请求头加token、错误重试）、响应码统一处理（如401跳转登录）。
    - 其他工具：日期格式化（`date.js`）、权限判断（`auth.js`），这些常影响全局逻辑。

3. **样式规范**（`src/assets`）
    - 全局变量（`variables.scss`）：主色、字体、间距，决定视觉统一。
    - 重置样式（`reset.scss`）：是否覆盖了浏览器默认样式（如`margin: 0`）。


### **四、辅助信息（必看）**
1. **`package.json`**
    - 依赖：看`dependencies`（如`vue@3.2.45`、`vue-router@4.1.6`），`devDependencies`（构建工具版本）。
    - 脚本：`npm run dev`启动命令，`build`打包配置（是否有环境变量区分`--prod`）。

2. **`.env`系列文件**
    - 环境变量：`VUE_APP_BASE_API`（接口前缀）、`VUE_APP_TITLE`（页面标题），影响项目运行逻辑。

3. **README.md**
    - 项目简介、技术栈、部署步骤，可能包含开发规范（如提交代码需走Git Hooks）。


### **五、高效技巧**
- **用IDE快捷键**：VSCode中`Ctrl+P`（全局搜索）搜文件名，`Ctrl+点击`跳转定义（追踪组件/函数来源）。
- **关注注释**：重点看`TODO`、`FIXME`标记的代码（可能是历史遗留问题）。
- **跑通流程**：本地启动项目，手动操作页面（如登录→跳转→提交表单），通过浏览器调试工具（`F12`）看组件渲染和接口调用，逆向理解代码逻辑。


### **常见项目结构模板（供对照）**
```
src/
├── main.js        # 入口文件  
├── api/           # 接口请求
│   └── system/
│   └── atvApi.ts
│   └── fcrudApi.ts
│   └── fileApi.ts
├── router/        # 路由
│   └── backEnd.ts
│   └── index.ts
│   └── frontEnd.ts  
│   └── router.ts  
├── stores/         # 状态管理（Vuex/Pinia）
│   ├── interface/ 
│   └── index.ts/
├── views/         # 页面组件
│   ├── atv  #活动 
│   ├── common #公共组件
│   ├── facade #门面
│   ├── monitor #监控中心   
│   └── system  #系统
├── components/    # 公共组件
│   ├── auth  权限
│   │   ├── auth.vue
│   │   ├── AuthAll.vue
│   │   └── Auths.vue
│   ├── cropper  #头像剪裁
│   │   └── index.vue
│   ├── editor  #富文本编辑器  
│   │   └── index.vue 
│   ├── iconSelect  #图标选择
│   │   └── index.vue
│   ├── sam #核心组件
│   ├── svgIcon  #svg图标
│   └── noticeBar  通知栏
│       └── index.vue
├── assets/        # 静态资源
│   ├── images/
│   ├── style/ 
│   └── font/
├── utils/         # 工具函数
│   └── ajax/  
│   └── echarts/
│   └── sam/
│   └── *.ts
├──  layout/        # 全局布局
│   └── component/
│   └── footer/   #底部
│   └── lockScreen/ #锁屏
│   └── logo/     #logo
│   └── main/       
│   └── navBars/   #导航栏
│   └── navMenu/   #导航菜单
│   └── routerView/  #路由视图
```
重要的文件
G:\Projects\VueProject\SamATV\src\views\common
src/views/common/dashboard/big/index.vue dashboard仪表盘

前端路由：G:\Projects\VueProject\SamATV\src\router\route.ts

先把请求拦截器和响应拦截器注释掉了
G:\Projects\VueProject\SamATV\src\utils\ajax\request.ts
scr/api 接口请求