自定义侧边栏按钮，点击跳转到大屏布局FullScreenLayout，数据大屏铺满屏幕
添加FullScreenLayout的路由   route.ts
views\common\screen-vue3   数据大屏相关的文件
main.ts 为了使得数据大正常运行添加了一些配置
package.json添加了一些配置
postcss.config.js  安装postcss库的时候自带的
tailwind.config.js 安装tailwind的时候自带的
当前数据大屏使用的mock模拟数据请求

2025-05-14 16:24:38 +08:00

6.0 KiB

Raw Permalink Blame History

运行命令

npm install
npm run dev

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

一、先看项目骨架（1-2小时）

入口文件（必看）
- src/main.ts：Vue实例初始化、全局插件（VueRouter/Vuex/Pinia）、路由/状态/组件的全局注册。
- 关注：引入了哪些第三方库（如Element-UI、Axios）？是否有全局指令/混入？
路由配置（src/router/index.ts）
- 看routes数组：标注了meta.title的页面名称（理解功能模块），children嵌套（多级路由结构），component对应的页面路径（如views/Home.vue）。
- 技巧：通过路由懒加载注释（() => import('@/views/xxx')）快速定位核心页面。
状态管理（src/stores）
- 看index.ts或各模块（如user.js、app.js）：全局状态的定义、mutation/actions逻辑（影响数据流向）。
- 重点：哪些状态被多个页面共享？是否有复杂的异步逻辑（如登录状态、权限控制）？

二、再看核心页面（2-4小时）

首页/主入口页（如views/Home.vue或Layout.vue）
- 结构：页面布局（NavBar、Sidebar、Content）、路由视图<router-view/>的位置。
- 逻辑：生命周期钩子（mounted中是否有数据请求）、与状态管理的交互（this.$store.state.user）。
高频操作页（如列表页、表单页）
- 列表页（如views/list/TableList.vue）：看data中的表格数据、methods中的接口调用（getList()）、分页逻辑。
- 表单页（如views/form/EditForm.vue）：看v-model绑定的字段、提交验证（rules）、与后端的交互（this.$axios.post）。
公共布局（src/layout）
- 全局头部、侧边栏、面包屑导航的实现，可能包含权限控制（如根据角色显示菜单）。

三、深入细节（按需求）

公共组件（src/components）
- 高频复用组件（如BaseTable、SelectDict）：看props定义（组件如何接收参数）、$emit事件（父组件如何响应）。
- 示例：一个DictSelect组件可能通过prop: dictCode接收字典类型，通过@change传递选中值。
工具函数（src/utils或helpers）
- 看request.js（axios封装）：拦截器逻辑（请求头加token、错误重试）、响应码统一处理（如401跳转登录）。
- 其他工具：日期格式化（date.js）、权限判断（auth.js），这些常影响全局逻辑。
样式规范（src/assets）
- 全局变量（variables.scss）：主色、字体、间距，决定视觉统一。
- 重置样式（reset.scss）：是否覆盖了浏览器默认样式（如margin: 0）。

四、辅助信息（必看）

package.json
- 依赖：看dependencies（如vue@3.2.45、vue-router@4.1.6），devDependencies（构建工具版本）。
- 脚本：npm run dev启动命令，build打包配置（是否有环境变量区分--prod）。
.env系列文件
- 环境变量：VUE_APP_BASE_API（接口前缀）、VUE_APP_TITLE（页面标题），影响项目运行逻辑。
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 接口请求

6.0 KiB Raw Permalink Blame History Unescape Escape