vue-cli目录结构

├── node_modules      # 安装的包
├── public	          # 静态资源
│   ├── favicon.ico
│   └── index.html
└── src
    ├── api	          # 请求接口封装模块
    ├── assets	      # 资源目录
    ├── components	  # 组件目录
    ├── router	      # 路由模块
    ├── store	        # Vuex容器模块
    ├── styles        # 样式目录
    ├── utils         # 工具模块目录
    ├── views         # 视图组件目录
        └──home        # 首页模块
        |	    ├── home.vue
        ├─video       # 视频模块
        |	    ├── video.vue
        ├─question    # 问答模块
        |	    ├── question.vue
        ├─search      # 搜索模块
        |	    ├── search.vue
        ├─user        # 用户模块
        |     ├── user.vue
        └─Layout.vue  # 公用布局组件
    ├── App.vue	      # 根组件
    └── main.js	      # 入口文件
├── .browserslistrc   # 浏览器的约定
├── .editorconfig     # 对本项目要用到编辑器的约定
├── .eslintrc.js      # eslint 配置
├── .gitignore        # git的忽略设置，哪些文件不需要git托管
├── babel.config.js	  # babel配置文件
├── package-lock.json	# npm相关文件
├── package.json	    # npm相关文件
└── README.md	        # 项目说明文件

.browserslistrc

> 1%             代表着全球超过1%的人使用浏览器
last 2 versions  表示所有浏览器兼容到最后两个版本
not dead   取反

dead条件：最新的两个版本中发现其市场份额以低于0.5%，并且24个月内没有任务官方支持和更新了。

.editorconfig      编辑器的一些配置(包括编码格式，缩进风格，换行格式)

[*.{js,jsx,ts,tsx,vue}]    匹配给定的任何一个
indent_style = space       设置缩进风格(tab是硬缩进，spcae是软缩进)
indent_size = 2            缩进宽度
trim_trailing_whitespace = true  设置true表示去除换行行首的任意空白字符
insert_final_newline = true      设置true表示使文件以一个空白行结尾
 

.eslintrc.js    对eslint进行配置

module.exports = {
  root: true, // 当前项目使用这个配置文件, 不会往父级目录找.eslintrc.js文件
  env: { // 指定eslint启动环境(vuecli底层是node支持), browser: true也可以在浏览器设置
    node: true
  },
  extends: [ // 扩展配置
    'plugin:vue/essential', // vue里必须的规则
    '@vue/standard' // 使eslint继承@vue/cli脚手架里的 - standard标准
  ],
  parserOptions: { // 对新语法使用eslint
    parser: 'babel-eslint' // 使用babel-eslint 来解析新语法ES6
  },
  // 这里可以进行自定义规则配置
  // key：规则代号
  // value：具体的限定方式
  //   "off" or 0 - 关闭规则
  //   "warn" or 1 - 将规则视为一个警告（不会影响退出码）,只警告，不会退出程序
  //   "error" or 2 - 将规则视为一个错误 (退出码为1)，报错并退出程序
  rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 上线环境用打印就报警告, 开发环境关闭此规则
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // debugger可以终止代码执行
    // 'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则)
  }
}

  补充 例如eslint对我们有些规则要求 想要修改规则 则在 rules里添加 

  rules: { // 自定义规则 - 其实上面集成后有很多内置的规则, 这里可以进行规则的一些修改
    // 省略其他
+   'no-multiple-empty-lines': 'off' // 不允许有连续多行空行(关闭规则)
  }

.gitignore   忽略上传哪些文件 

/doc/           #仅仅忽略项目根目录下的 doc文件夹，不包括 xxx/doc/
*.html          #过滤所有.html 文件
/doc/Doxx.txt   #过滤某个具体文件
!doc/           #不过滤该文件夹
!*.html         #不过滤所有.zip文件
!/doc/Doxx.txt  #不过滤该文件
# 在已忽略文件夹中不忽略指定文件
/node_modules/*
!/node_modules/layer/layer.js

babel.config  将高级语法降级

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

package.json 

package.json 定义了这个项目所需要的各个模块，以及配置信息(名称，版本，许可证等) 

1.name

package.json文件是一个JSON对象，该对象的每一个成员就是当前项目的每一项，name就是项目名称，version是版本（遵守“大版本.次要版本.小版本”的格式）。

{
	"name": "Hello World",
	"version": "0.0.1",
	"author": "张三",
	"description": "第一个node.js程序",
	"keywords":["node.js","javascript"],
	"repository": {
		"type": "git",
		"url": "https://path/to/url"
	},
	"license":"MIT",
	"engines": {"node": "0.10.x"},
	"bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
	"contributors":[{"name":"李四","email":"lisi@example.com"}],
	"scripts": {
		"start": "node index.js"
	},
	"dependencies": {
		"express": "latest",
		"mongoose": "~3.8.3",
		"handlebars-runtime": "~1.0.12",
		"express3-handlebars": "~0.5.0",
		"MD5": "~1.2.0"
	},
	"devDependencies": {
		"bower": "~1.2.8",
		"grunt": "~0.4.1",
		"grunt-contrib-concat": "~0.3.0",
		"grunt-contrib-jshint": "~0.7.2",
		"grunt-contrib-uglify": "~0.2.7",
		"grunt-contrib-clean": "~0.5.0",
		"browserify": "2.36.1",
		"grunt-browserify": "~1.3.0",
	}
}

2.script字段

script 指定了运行脚本命令的npm命令缩写 比如start指定运行npm run star时 所要执行的命令

下面的设置指定了npm run preinstall、npm run postinstall、npm run start、npm run test时，所要执行的命令。

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

 

3.dependencies字段，devDependencies字段

dependencies生产依赖:         dependencies中的依赖项是正常运行该包所需要的依赖项；      （用户上线发布）

devDependencies开发依赖:   devDependencies中的依赖项是开发的时候所需要的依赖项，比如一些进行单元测试之类的 包；  （用于本地开发）

dependencies依赖的包不仅开发环境能使用，生产环境也能使用

{
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  }
}

版本号

指定版本： 1.2.2 遵循大版本 次要版本 小版本的格式 安装时只安装指定版本

波浪号 ：   ~1.2.2 表示安装的最新版本不低于1.2.2 但是不按照1.3.x    安装时不大于大版本和次要版本

插入号： 比如~1.2.2 表示安装 1.x.x的最新版本但是不安装2.x.x 也就是安装时不改变大版本号  如果安装时大版本号为0，则插入的行为与波浪号相同

latest：安装最新版本。

原文：package.json文件参考教程

 

package-lock.json 

锁定安装时的版本号 保证其他人在使用的时候 依赖同一个版本

生产方式：从使用npm版本为^5.x.x package-lock.json 会默认自动生成 

从npm ^ 5.1.x开始，package.json能够胜过 package-lock.json，所以你遇到较少让人头痛的问题,不再删除 package-lock 只是为了运行npm install并重新生成它

当项目中已有package-lock.json文件，在安装项目依赖时，将以改文件进行解析安装指定版本依赖包，而不是使用package.json来解析个安装模块。因为package-lock为每个模块及其每个依赖项指定了版本，位置和完整性哈希，所以每次创建的安装都是相同的，无论使用什么设备，将来安装都给你相应的结果。