Vue 通过vue init webpack 搭建项目结构目录解析

Vue 通过vue init webpack 搭建项目结构目录解析

基础目录介绍

{ //这个代码块里的都是项目描述，是创建者自定义的
  "name": "qqmusic",  //项目名称
  "version": "1.0.0",   //项目版本
  "description": "qq music app by vue", //项目描述
  "author": "author", //项目作者
  "private": true, //是否为私有
  "scripts": { //这里是命名一些变量对应什么指令
    "dev": "node build/dev-server.js", //运行dev 相当于运行node build/dev-server.js
    "start": "node build/dev-server.js", //同上
    "build": "node build/build.js", //同上
    "lint": "eslint --ext .js,.vue src" //同上
  },
  "dependencies": { //这个代码块描述此 项目依赖 的插件；下面两个做什么的自行搜索
    "vue": "^2.2.6", 
    "vue-router": "^2.3.1"
  },
  "devDependencies": { //这个代码块里描述的是此项目 运行依赖 插件；注意根上面项目依赖的区分
    "autoprefixer": "^6.7.2", //这英文翻译过来就是：自动 预 修复者，专业称呼知道的可以回复下；它是一个css前缀处理工具，有了它我们就不用写很多前缀了
		...
  },
  "engines": { // 引擎相关的内容
    "node": ">= 4.0.0", //要求node版本要大于指定版本，否则不给你运行~
    "npm": ">= 3.0.0" //要求npm版本大于指定版本
  },
  "browserslist": [ // 配置浏览器的信息查询范围，这些信息将给Autoprefixer babel-env-preset eslint-plugin-compat这些组件来使用 https://www.npmjs.com/package/browserslist
    "> 1%", //
    "last 2 versions", //每种浏览器的最近的两个版本
    "not ie <= 8" //IE8及以下版本不查询
  ]
}

详细介绍：

scripts

是我们要运行命令的简称，在命令行下使用npm run命令，就可以执行这段脚本。

eg：npm run dev 则执行它后面的node build/dev-server.js

dependencies和devDependencies

dependencies：应用能够正常运行所依赖的包。这种 dependencies 是最常见的，用户在使用 npm install 安装你的包时会自动安装这些依赖。

devDependencies：开发应用时所依赖的工具包。通常是一些开发、测试、打包工具，例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也不会安装这些依赖。

engines

字段指明了该模块运行的平台，比如 Node 的某个版本或者浏览器。