详解 Vue 目录及配置文件之 package.json

灰太狼 2023-03-01 12:50 8阅读 0赞

## 1.1 项目目录介绍 ##

![在这里插入图片描述][20200722091436130.png]

<table> 
 <thead> 
  <tr> 
   <th align="left">目录/文件</th> 
   <th align="left">说明</th> 
   <th align="left">详解</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">build</td> 
   <td align="left">项目构建(webpack)相关代码</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107501735" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">config</td> 
   <td align="left">配置目录，包括端口号等</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107512137" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">node_modules</td> 
   <td align="left">npm 加载的项目依赖模块</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107535733" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">src</td> 
   <td align="left">这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：<br> ♞ assets：放置一些图片，如 logo <br> ♞ components：放置一些组件<br> ♞ views：页面(视图)组件<br> ♞ router.js：路由脚本文件<br> ♞ App.vue：项目入口文件<br> ♞ main.js:：项目的核心文件</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107535733" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">static</td> 
   <td align="left">静态资源目录，如图片、字体等</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107535733" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">test</td> 
   <td align="left">初始测试目录，可删除</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107535733" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">.xxxx 文件</td> 
   <td align="left">这些是一些配置文件，包括语法配置，git 配置等</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">index.html</td> 
   <td align="left">首页入口文件</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">package.json</td> 
   <td align="left">项目配置文件</td> 
   <td align="left"><a href="https://blog.csdn.net/Demo_Null/article/details/107589995" rel="nofollow">详解</a></td> 
  </tr> 
  <tr> 
   <td align="left">README.md</td> 
   <td align="left">项目的说明文档，markdown 格式</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

## 1.2 package.json ##

### 1.2.1 概述 ###

package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

### 1.2.2 配置说明 ###

{ 
      // 项目/模块名称，长度必须小于等于 214 个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母
      "name": "myvue",
      // 项目版本
      "version": "1.0.0",
      // 项目描述
      "description": "project",
      // 作者
      "author": "Demo_Null",
      // 是否私有，设置为 true 时，npm 拒绝发布
      "private": true,
      // 执行 npm 脚本命令简写，执行前面的简写就代表执行后面的命令
      "scripts": { 
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "unit": "jest --config test/unit/jest.conf.js --coverage",
        "e2e": "node test/e2e/runner.js",
        "test": "npm run unit && npm run e2e",
        "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
        "build": "node build/build.js"
      },
      // 生产环境下，项目运行所需依赖
      "dependencies": { 
        "vue": "^2.5.2",
        "vue-router": "^3.0.1"
      },
      // 开发环境下，项目所需依赖
      "devDependencies": { 
        "autoprefixer": "^7.1.2",
        "babel-core": "^6.22.1",
        "babel-eslint": "^8.2.1",
        "babel-helper-vue-jsx-merge-props": "^2.0.3",
        "babel-jest": "^21.0.2",
        "babel-loader": "^7.1.1",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.5.2",
        "webpack": "^3.6.0",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-merge": "^4.1.0"
      },
      // 项目运行的平台
      "engines": { 
        "node": ">= 6.0.0",
        "npm": ">= 3.0.0"
      },
      // 供浏览器使用的版本列表
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }

### 1.2.3 版本号描述 ###

npm 模块的完整的版本号一般是 `主版本 . 次要版本 . 补丁版本`，一般情况下，次要版本号发生改变的话，表示程序有重大更新。

**☞ 使用 ~ 表示版本范围**

**☞ 使用 ^ 表示版本范围**

<table> 
 <thead> 
  <tr> 
   <th align="left">版本号</th> 
   <th align="left">描述</th> 
   <th align="left">版本范围</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">^1.3.4</td> 
   <td align="left">主版本号不为 0</td> 
   <td align="left">   [1.3.4，2.0.0)   </td> 
   <td align="left">主版本不为 0，允许次要版本 + 补丁版本升级(此例下限是1.3.4，上线是 2.0.0 但不匹配 2.0.0)</td> 
  </tr> 
  <tr> 
   <td align="left">^0.2.3</td> 
   <td align="left">主版本号为 0，次要版本号不为 0</td> 
   <td align="left">[0.2.3，0.3.0)</td> 
   <td align="left">主版本为 0，次要版本不为 0，允许补丁版本升级(此例下限是 0.2.3，上限是 0.3.0 但不匹配 0.3.0)</td> 
  </tr> 
  <tr> 
   <td align="left">^0.0.3</td> 
   <td align="left">主版本号 + 次要版本号均为 0</td> 
   <td align="left">[0.0.3，0.0.4)</td> 
   <td align="left">主版本号 + 次要版本号均为 0，无法升级模块</td> 
  </tr> 
  <tr> 
   <td align="left">^1.3</td> 
   <td align="left">主版本不为 0，补丁版本缺失</td> 
   <td align="left">[1.3.0，2.0.0)</td> 
   <td align="left">主版本不为 0，补丁版本因缺失被视作 0，允许次要版本 + 补丁版本升级到到最新(此例下限是 1.3.0，上线是 2.0.0 但不匹配 2.0.0)</td> 
  </tr> 
  <tr> 
   <td align="left">^0.2</td> 
   <td align="left">主版本为 0，补丁版本缺失</td> 
   <td align="left">[0.2.0，0.3.0)</td> 
   <td align="left">主版本为 0，补丁版本因缺失被视作 0，允许补丁版本升级到最新(此例下限是 0.2.0，上限是 0.3.0 但不匹配0.3.0)</td> 
  </tr> 
  <tr> 
   <td align="left">^1</td> 
   <td align="left">主版本号不为 0，次要版本 + 补丁版本均缺失</td> 
   <td align="left">[1.0.0，2.0.0)</td> 
   <td align="left">主版本不为 0，次要版本 + 补丁版本因缺失被视作 0，允许次要版本 + 补丁版本升级(此例下限是 1.0.0，上线是 2.0.0 但不匹配 2.0.0)</td> 
  </tr> 
  <tr> 
   <td align="left">^0</td> 
   <td align="left">主版本号为 0，次要版本 + 补丁版本均缺失</td> 
   <td align="left">[0.0.1，1.0.0)</td> 
   <td align="left">主版本为 0，次要版本因缺失被视作 0，补丁版本虽缺失但只能被视作 1，允许缺失的次要版本 + 补丁版本升级到最新(此例下限是 0.0.1，上限是 1.0.0 但不匹配 1.0.0)</td> 
  </tr> 
 </tbody> 
</table>

[20200722091436130.png]: /images/20230208/9626985d7516455295942df7f16d4a66.png