1.Vue项目目录结构

一个Vue项目的目录结构见下表： |目录/文件|说明| |-|-| |build|项目构建(webpack)相关代码| |config|配置目录，包括端口号等| |node_modules|npm 加载的项目依赖模块| |src|这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets：放置一些图片，如 logo
components：放置一些组件
views：页面(视图)组件
router：路由脚本文件
App.vue：项目入口文件
main.js:项目的核心文件| |static|静态资源目录，如图片、字体等| |test|初始测试目录，可删除| |.xxxx 文件|这些是一些配置文件，包括语法配置，git 配置等| |index.html|首页入口文件| |package.json|项目配置文件| |README.md|项目的说明文档，markdown 格式|

2.package.json

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

配置说明

{
  // 项目/模块名称，长度必须小于等于 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"
  ]
}

vue-cli3.x项目的package.json中，有两种依赖： - dependencies：项目依赖。在编码阶段和呈现页面阶段都需要的，也就是说，项目依赖即在开发环境中，又在生产环境中。如js框架vue、页面路由vue-router，各种ui框架antd、element-ui、vant等。 - devDependencies: 开发依赖。仅仅在写代码过程中需要使用，比如css预处理器、vue-cli脚手架、eslint之类。

package.json中^和~的含义： ^和~符号用来指定版本号 1）指定版本：比如"vue": “2.6.11”，表示安装2.6.11的版本 2）波浪号~指定版本：比如 “vue”: “~2.6.11”,表示安装2.6.x的最新版本（不低于2.6.11），但是不安装2.7.x，也就是说安装时不改变大版本号和次要版本号 3）^+指定版本：比如 “vue”: “^2.6.11”,表示安装2.6.11及以上的版本，但是不安装3.0.0，也就是说安装时不改变大版本号。

3.package-lock.json package-lock.json文件，lock代表的是“锁定”的意思。用来锁定当前开发使用的版本号，防止npm install的时候自动更新到了更新版本。因为新版本可能替换掉老的api，导致之前的代码报错。

项目中引入的包版本号之前经常会加^号，每次在执行npm install之后，下载的包都会发生变化，为了系统的稳定性考虑，每次执行完npm install之后会创建或者更新package-lock文件。该文件记录了上一次安装的具体的版本号，相当于是提供了一个参考，在出现版本兼容性问题的时候，就可以参考这个文件来修改版本号即可。