刚进公司应该如何读懂一个vue项目

 一、首先看package.json文件（看它使用了哪些插件框架）

1. scripts: 包含一系列命令，比如启动服务 (serve)、构建 (build)、构建 Electron 应用程序 (electron:build) 等。用来决定你是使用npm run dev 运行项目还是npm run serve
2. main: 指定 Electron 应用程序的入口文件为 "background.js"。
3. dependencies: 包含项目运行时依赖的各种包，如 "@serialport/bindings"、"axios" 等。
4. devDependencies: 包含开发时依赖的各种包，如 "@vue/cli-plugin-babel" 等。

5. eslintConfig: 这个部分是用来配置 ESLint，一个用于检测和纠正代码风格的工具。

   • root: 设置为 true，表示 ESLint 将停止查找父级目录中的配置文件，这是为了确保只使用当前项目中的 ESLint 配置。
   • env: 指定环境，这里设置为 { "node": true }，表示该项目在 Node.js 环境中运行。
   • extends: 继承的配置，这里包括了 "plugin:vue/essential" 和 "eslint:recommended"，前者包含了与 Vue.js 相关的规则，后者是 ESLint 推荐的一组规则。
   • parserOptions: 配置解析器选项，这里指定使用 "babel-eslint" 作为解析器，允许解析一些 Babel 的扩展语法。
   • rules: 用于配置具体的 ESLint 规则，这里将 "no-debugger" 设置为 "off"，表示允许使用 debugger 语句。

6. browserslist: 这个部分定义了项目的目标浏览器，用于确定项目需要支持的浏览器范围。

   • "> 1%": 支持全球使用量大于1%的浏览器。
   • "last 2 versions": 支持每个浏览器的最后两个版本。
   • "not dead": 不支持已经停止维护的浏览器。

二. README.md

在这个文件里面一般写着如何运行项目，比如说要使用的node版本是多少，如何打包等也是要重点关注的。

三.main.js入口文件

一定要看的main.js入口文件，其中vue.use()和import 引入的文件都对梳理项目架构很重要

四.store文件

这个文件里面是vuex仓库或者pinia，用来存储一些方法数据，这样你就会知道有时候一些莫名奇妙的数据到底是从哪里流动的，可以知道页面数据的流动情况

五.router文件

路由配置可以让你知道页面结构，对于理清页面脉络十分重要

六.src文件

src文件就是整个页面了，api文件一般就是发请求，components用来封装你们公司一些组件，表单状态树等，assets小图标，401，402图片等，directive自定义指令，filters过滤器，layout页面布局，mixins里面可以写一些公共的逻辑、方法或者数据，以便在多个组件中共享和复用，styles样式，utils一些方法