项目的package.json

package.json文件：

package.json 文件是 Node.js 项目的核心文件，它包含了项目的元数据、依赖关系、脚本命令以及其他配置信息。以下是一些常见的字段和它们的用途：

1. name: 项目的名称。必须是唯一的，且不能与现有的包名冲突。
2. version: 项目的版本号。遵循语义化版本控制（Semantic Versioning）规范。
3. description: 对项目的简短描述，帮助他人快速了解项目。
4. keywords: 关键词列表，有助于在npm注册表中更容易找到你的包。
5. homepage: 项目的主页URL。
6. bugs: 提供一个用于报告bug的地址，可以是一个邮箱或网址。
7. license: 项目使用的开源许可证。
8. author / contributors: 作者或者贡献者的信息，可以包含姓名、邮箱和网址等。
9. files: 一个数组，指定发布时需要包含的文件，默认会忽略.git目录和.npmignore文件中列出的文件。
10. main: 指定项目的入口文件，通常是一个JavaScript文件。
11. bin: 如果你的项目包含可执行脚本，这里用来映射命令行工具的名称到本地文件路径。
12. scripts: 定义一系列可以通过 npm run 命令执行的脚本命令，比如启动开发服务器、构建项目等。
13. dependencies: 列出项目运行所需的依赖包及其版本范围。
14. devDependencies: 列出仅在开发过程中需要的依赖包及其版本范围，如测试工具或构建工具。
15. peerDependencies: 定义与其他包共存的依赖关系，通常用于插件或库。
16. bundledDependencies: 一个数组，列出了在打包时需要包含的所有依赖包。
17. engines: 指定项目运行所需要的Node.js版本或其他引擎。
18. repository: 指定代码仓库的位置，格式为 { "type": "git", "url": "Git repository URL" }。
19. browserslist 用于指定你的项目支持的浏览器范围，可以包含一个查询列表，用来描述你希望支持的浏览器和版本。

以上列举的是package.json文件中最常用的字段，但并非所有项目都需要定义所有的字段。根据项目的具体需求，你可以选择性地使用这些字段。此外，还可以添加自定义字段来存储项目特定的信息，不过这些自定义字段不会被npm直接使用。

在package.json中大部分情况下只需要关注"scripts"、"dependencies"、"devDependencies"

"scripts"

"scripts" 是 用来启动和打包我们整个项目的，也就是一些脚本。
（不过脚本的名字可能每个公司不一样，所以还需甄别）

"scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "report": "vue-cli-service build --report"
  }

**这段代码是一个 package.json 文件中 scripts 字段的一部分，定义了几个可以在项目中执行的npm脚本命令。**具体来说：

• "start": "vue-cli-service serve"：这个命令用于启动开发服务器。当你运行 npm run start 或者直接 npm start（npm允许省略run对于start命令）时，它会调用 Vue CLI 提供的服务来编译你的Vue项目，并在浏览器中打开一个本地服务器，通常还带有热重载功能，即当你修改代码时，页面会自动刷新。

• "build": "vue-cli-service build"：这个命令用于构建生产版本的项目。运行 npm run build 时，Vue CLI 会优化你的应用以供部署上线，包括对JavaScript、CSS和HTML文件进行压缩，以及为生产环境做其他必要的优化。

• "report": "vue-cli-service build --report"：此命令也是用来构建项目，但同时还会生成一个报告，展示项目依赖模块的大小及它们如何被打包的详细情况。这对于分析项目的性能瓶颈非常有用。通过运行 npm run report，你可以得到一个可视化报告，帮助你了解哪些部分可能需要优化以提高加载速度或减少打包体积。

这些脚本都是基于 Vue CLI 工具链提供的功能，Vue CLI 是一个官方提供的支持快速搭建 Vue.js 前端应用的完整工具链。

在 package.json 文件中的 scripts 字段定义的脚本命令是可以根据需要自定义和修改的。这意味着你可以更改 start、build、report 这些名称为任何你想要的名字，同时也可以修改它们对应的命令来执行不同的操作或添加更多的命令选项。

在 package.json 文件中，只有 scripts 字段是专门用于定义自定义脚本命令的。这意味着你只能在这个字段内添加、修改或删除脚本来执行特定的任务，比如启动开发服务器、构建项目或者运行测试等。

"dependencies"

dependencies 列出项目依赖的外部npm包及其版本号。

"dependencies": {
    "axios": "^0.18.1",
    "core-js": "^3.30.0",
    "element-ui": "^2.15.13",
    "js-cookie": "^2.2.0",
    "normalize.css": "7.0.0",
    "path-to-regexp": "2.4.0",
    "vue": "2.6.10",
    "vue-router": "^3.6.5",
    "vuex": "3.1.0"
  }

这段代码是 package.json 文件中 dependencies 字段的一部分，列出了项目依赖的外部npm包及其版本号。具体解析如下：

• "axios": "^0.18.1"：Axios 是一个基于Promise的HTTP客户端，用于浏览器和Node.js。^0.18.1 表示可以安装任何大于或等于 0.18.1 且小于 0.19.0 的版本。

• "core-js": "^3.30.0"：Core-js 是一个模块化的标准库用于 JavaScript，包括了 polyfills 支持 ES2015+ 特性。^3.30.0 意味着可以选择安装 3.30.0 及以上但低于 4.0.0 的版本。

• "element-ui": "^2.15.13"：Element UI 是一个 Vue.js 2.0 的桌面端组件库。^2.15.13 允许安装 2.15.13 及以上的补丁更新，但不会升级到 3.x.x 系列。

• "js-cookie": "^2.2.0"：JS-Cookie 是一个用于处理浏览器 cookies 的简单、轻量级的 JavaScript API。^2.2.0 同样表示接受后续的补丁和小版本更新，但不包括重大版本更新。

• "normalize.css": "7.0.0"：Normalize.css 是一种可定制的CSS文件，帮助你使浏览器呈现所有元素更加一致并符合现代标准。这里明确指定了版本 7.0.0，没有使用语义化版本选择符，意味着将严格使用这个特定版本。

• "path-to-regexp": "2.4.0"：Path-to-regexp 是一个将路径字符串转换为正则表达式的工具，常用于路由匹配。这里也指定了确切版本 2.4.0。

• "vue": "2.6.10"：Vue.js 是一个用于构建用户界面的渐进式框架。此项目明确依赖于版本 2.6.10。

• "vue-router": "^3.6.5"：Vue Router 是官方支持的 Vue.js 路由管理器，与 Vue.js 核心深度集成。^3.6.5 允许进行小版本和补丁版本的更新。

• "vuex": "3.1.0"：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这里同样固定在版本 3.1.0。

这些依赖项共同工作，为基于Vue.js的应用提供了一个完整的开发环境，包括HTTP请求（Axios）、UI组件（Element UI）、状态管理（Vuex）、路由（Vue Router）等关键功能。通过指定依赖的版本，开发者确保了项目的稳定性和一致性，避免由于第三方库的更新而引入不必要的兼容性问题。

"devDependencies"

devDependencies 用于列出项目开发过程中所需要的依赖包，而不是生产环境中必需的依赖。这些依赖通常包括 构建工具、测试框架、文档生成器等有助于开发过程但不需要在生产环境中运行的工具或库。

"devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "autoprefixer": "9.5.1",
    "babel-eslint": "10.1.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "2.4.2",
    "connect": "3.6.6",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "html-webpack-plugin": "3.2.0",
    "runjs": "4.3.2",
    "sass": "^1.49.10",
    "sass-loader": "10",
    "script-ext-html-webpack-plugin": "2.1.3",
    "serve-static": "1.13.2",
    "svg-sprite-loader": "^6.0.11",
    "vue-template-compiler": "2.6.10"
  }

• "@vue/cli-plugin-babel": "4.4.4"：Vue CLI 的 Babel 插件，帮助你将现代 JavaScript 代码转译为向后兼容的版本。
• "@vue/cli-plugin-eslint": "4.4.4"：Vue CLI 的 ESLint 插件，用于在 Vue.js 项目中集成 ESLint，以检查和修复 JavaScript 代码风格问题。
• "@vue/cli-service": "4.4.4"：提供由 Vue CLI 提供的服务命令（如 serve, build 等），是构建 Vue.js 应用的核心服务。
• "autoprefixer": "9.5.1"：一个自动处理 CSS 前缀的工具，确保你的样式兼容不同的浏览器。
• "babel-eslint": "10.1.0"：使 ESLint 能够解析 Babel 的最新语法特性。
• "babel-plugin-dynamic-import-node": "2.3.3"：Babel 插件，用于转换动态 import() 到 Node.js 环境中的 require()。
• "chalk": "2.4.2"：一个终端字符串样式库，允许你在控制台输出带颜色和样式的文本。
• "connect": "3.6.6"：一个中间件框架，简化了编写 Web 应用程序的过程。
• "eslint": "6.7.2"：一个流行的 JavaScript 和 JSX 代码检查工具，有助于保持代码质量和一致性。
• "eslint-plugin-vue": "6.2.2"：ESLint 的插件，添加了对 Vue.js 单文件组件的支持。
• "html-webpack-plugin": "3.2.0"：一个 webpack 插件，简化了 HTML 文件的创建，能够自动生成 HTML 并注入所有 webpack bundle。
• "runjs": "4.3.2"：一个任务执行器，可以让你通过 JavaScript 编写任务脚本。
• "sass": "^1.49.10"：Sass 是一种成熟的 CSS 预处理器，增加了变量、嵌套规则、混合等功能。
• "sass-loader": "10"：一个 webpack 加载器，允许你在项目中使用 Sass/SCSS 文件。接受安装 sass-loader 的任何 10.x.x 版本，但不包括 11.0.0 或更高主版本的更新。
• "script-ext-html-webpack-plugin": "2.1.3"：扩展 html-webpack-plugin 功能的插件，可以指定如何处理生成 HTML 中的 script 标签。
• "serve-static": "1.13.2"：提供静态文件服务的中间件，通常与 Express.js 一起使用。
• "svg-sprite-loader": "^6.0.11"：webpack 加载器，将多个 SVG 文件合并成一个 sprite 图，并且可以通过简单的引用方式使用这些图标。
• "vue-template-compiler": "2.6.10"：配合 vue-loader 使用，编译 Vue.js 单文件组件的模板部分。

这些开发依赖项共同支持项目的构建、测试和优化过程，但不会被包含在生产环境中。它们主要用于提高开发效率、保证代码质量以及增强开发者体验。