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

时间:2022-07-26
本文章向大家介绍详解 Vue 目录及配置文件之 package.json,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.1 项目目录介绍

目录/文件

说明

详解

build

项目构建(webpack)相关代码

详解

config

配置目录,包括端口号等

详解

node_modules

npm 加载的项目依赖模块

详解

src

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件: ♞ assets:放置一些图片,如 logo  ♞ components:放置一些组件 ♞ views:页面(视图)组件 ♞ router.js:路由脚本文件 ♞ App.vue:项目入口文件 ♞ main.js::项目的核心文件

详解

static

静态资源目录,如图片、字体等

详解

test

初始测试目录,可删除

详解

.xxxx 文件

这些是一些配置文件,包括语法配置,git 配置等

index.html

首页入口文件

package.json

项目配置文件

详解

README.md

项目的说明文档,markdown 格式

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 模块的完整的版本号一般是 主版本 . 次要版本 . 补丁版本,一般情况下,次要版本号发生改变的话,表示程序有重大更新。

☞ 使用 ~ 表示版本范围

版本号

描述

版本范围

说明

~2.3.4

主版本 + 次要版本 + 补丁版本

[2.3.4,2.4.0)

在主版本 + 次要版本不允许变更的前提下,允许补丁版本升级(补丁板板号下限是4,无上限)

~2.3

主版本 + 次要版本

[2.3.0,2.4.0)

在主版本 + 次要版本不允许变更的前提下,允许补丁版本升级

~2

主版本

[2.0.0,3.0.0)

在主版本不允许变更的前提下,允许次要版本 + 补丁版本升级

☞ 使用 ^ 表示版本范围

版本号

描述

版本范围

说明

^1.3.4

主版本号不为 0

[1.3.4,2.0.0)

主版本不为 0,允许次要版本 + 补丁版本升级(此例下限是1.3.4,上线是 2.0.0 但不匹配 2.0.0)

^0.2.3

主版本号为 0,次要版本号不为 0

[0.2.3,0.3.0)

主版本为 0,次要版本不为 0,允许补丁版本升级(此例下限是 0.2.3,上限是 0.3.0 但不匹配 0.3.0)

^0.0.3

主版本号 + 次要版本号均为 0

[0.0.3,0.0.4)

主版本号 + 次要版本号均为 0,无法升级模块

^1.3

主版本不为 0,补丁版本缺失

[1.3.0,2.0.0)

主版本不为 0,补丁版本因缺失被视作 0,允许次要版本 + 补丁版本升级到到最新(此例下限是 1.3.0,上线是 2.0.0 但不匹配 2.0.0)

^0.2

主版本为 0,补丁版本缺失

[0.2.0,0.3.0)

主版本为 0,补丁版本因缺失被视作 0,允许补丁版本升级到最新(此例下限是 0.2.0,上限是 0.3.0 但不匹配0.3.0)

^1

主版本号不为 0,次要版本 + 补丁版本均缺失

[1.0.0,2.0.0)

主版本不为 0,次要版本 + 补丁版本因缺失被视作 0,允许次要版本 + 补丁版本升级(此例下限是 1.0.0,上线是 2.0.0 但不匹配 2.0.0)

^0

主版本号为 0,次要版本 + 补丁版本均缺失

[0.0.1,1.0.0)

主版本为 0,次要版本因缺失被视作 0,补丁版本虽缺失但只能被视作 1,允许缺失的次要版本 + 补丁版本升级到最新(此例下限是 0.0.1,上限是 1.0.0 但不匹配 1.0.0)