Vue项目架构详解

1 package.json文件

1.1 scripts 对象

  "scripts": {
    "start": "npm run dev",
    "dev": "vue-cli-service serve",
    "prod": "vue-cli-service serve --mode production",
    "test": "vue-cli-service serve --mode test"  // 三个环境下的启动命令，也可以写成serve:test这种形式，打包命令也一样  
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  }

1.1.1 npm start

1. 帮助文档
   命令行中运行 npm help start ，打开该命令的帮助内容网页。
   其实里面已经说的很清楚了：
   Description This runs an arbitrary command specified in the package's "start" property of its "scripts" object. If no "start" property is specified on the "scripts" object, it will run node server.js.

2. 详解

   1. 该命令需要在vue项目的工作目录下运行。比如，我的 vue 项目的工作目录为 C:\devlelop\ws\vue-project\，则应该在该工作目录下运行该命令。
   2. 它可以运行任意的命令，该命令是由 package.json 文件中的 scripts 对象中的 start 属性值指定。
   3. 如果没有 start 属性，则会转而执行这个命令 node server.js
   4. 该命令比较特殊！scripts 对象中，只有这个命令不需要加 run（当然也可以加 run），其他的都需要加 run ，比如 npm run build:prod

1.1.2 npm run dev

"dev": "vue-cli-service serve"

该命令省略了 mode 参数，因为如果不写 mode 参数，则它默认是 development，所以以上命令相当于 "dev": "vue-cli-service serve --mode development"