vue^2项目各文件

一、package.json

• 详解
• 快捷查询1
• homepage属性
• browserslist属性，npx browserslist指令

二、package-lock.json

	生成方式：从 npm 5 版本之后只要使用 npm install 
命令下载，就会自动生成 package-lock.json 文件。

主要作用：
1）描述 node_modules 文件中所有模块的版本信息，
   模块来源及依赖的小版本信息。
2）当版本升级，使用 npm install 命令时，会安
   装 package.json 中指定的大版本的最新版本。
   如 package.json 中指定版本"dependencies":
    { "webpack": "^2.0.0" }，则 package-loc
    k.json 会按照 {"webpack": "2.7.0"} 版本
    升级。在保证大版本号前提下的最新版本。
    webpack "2.7.0" 是 "2.x.x" 的最高版本。

补充：1、package-lock.json经常被删除，有时会导致项目报错,出现依赖不兼容。

1、npm 5.0.x版本，不管package.json如何变，npm i都会
根据package-lock.json文件下载；
2、npm 5.1.0版本，npm i会无视package-lock.json文件，去下
载最新的npm；
3、npm 5.4.2版本，如果package.json和package-lock.json
版本号规则不同，npm i会根据package.json去下载最新的包并
更新至package-lock.json，如果package.json和
package-lock.json版本号规则相同，那么执行npm i都会
根据package-lock.js下载，不会理会package实际包的版
本是否有跟新（使用cnpm/tnpm,规则不同时可能会
对package-lock.json的更新失效）

排查步骤：①误删package-lock.json后，重新npm i生成。②第①步操作完后如果依旧报同样的错，先npm cache clean --force清缓存再npm i生成package-lock.json文件。③接下来可能会报某些插件的错误信息，对照官方文档兼容版本，将不兼容的插件升级或降级

2、package.json->node_modules->package-lock.json
作用：

1、package.json里面定义的是版本范围，具体跑npm i的时候
安的什么版本，要解析后才能决定，这里面定义的依赖关系树，
可以称之为逻辑树
2、node_modules文件夹下才是npm实际安装的确定版本的东西，
里面的文件夹结构我们可以称之为物理树
3、package-lock.json可以理解成对结合了逻辑树和物理树的
一个快照，里面有明确的各依赖版本号、实际安装的结构、也有
逻辑树的结构

三、postcssrc.js
添加浏览器私缀：为兼容所有浏览器，有时css属性需要对不同的浏览器添加私缀，比如-webkit 是表示针对 safari 浏览器支持，-ms表示针对 IE 浏览器支持。
内容：

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}