tingzi
3d47011d12
自定义侧边栏按钮，点击跳转到大屏布局FullScreenLayout，数据大屏铺满屏幕 添加FullScreenLayout的路由 route.ts views\common\screen-vue3 数据大屏相关的文件 main.ts 为了使得数据大正常运行添加了一些配置 package.json添加了一些配置 postcss.config.js 安装postcss库的时候自带的 tailwind.config.js 安装tailwind的时候自带的 当前数据大屏使用的mock模拟数据请求
135 lines
6.0 KiB
Markdown
135 lines
6.0 KiB
Markdown
# 运行命令
|
||
|
||
- 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 接口请求 |