对路径-以引用文件之网页所在位置为参考基础，而建立出的目录路径。因此，当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。

绝对路径-以Web站点根目录为参考基础的目录路径。之所以称为绝对，意指当所有网页引用同一个文件时，所使用的路径都是一样的。
其实绝对路径与相对路径的不同之处，只在于描述目录路径时，所采用的参考点不同。由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根目录为参考点的路径描述方式才会被称之为绝对路径。　

　　以下为建立路径所使用的几个特殊符号，及其所代表的意义。

　　“.”–代表目前所在的目录。

　　“..”–代表上一层目录。

　　“/”–代表根目录。

例：假设读者所建立的Web站点拥有如下图所示目录路径。假若要在Ref.htm文件中引用BeRef.gif文件时，其相对路径如下：
　　./SubDir2/BeRef.gif
上面的引用路径中，”.”代表目前的目录(Dir1)，所以”./SubDir2”代表目前目录下的SubDir2。其实，也可以省略”./”直接用这个式引用。

　　SubDir2/BeRef.gif

　　若使用绝对路径以根目录为参考点引用该文件时，引用路径如下：

　　/Dir1/SubDir2/BeRef.gif

　　如果Web站点的目录之结构如下图示:

　　引用BeRef.gif文件的相对路径又是如何呢?假若要在Ref.htm文件中引用BeRef.gif文件时其相对路径如下：
　　../SubDir2/BeRef.gif
　　上面的引用路径中，”..”代表上一层目录，所以，/Dir2”代表上一层目录下的Dir2子目录。若使用绝对路径引用时，则引用路径如下：　　
/Dir2/BeRer.gif
　　我们再举一个比较复杂的例子，来比较一下相对路径与绝对路径的使用。假设在读者所建立的Web站点中，拥有如下图的目录路径。

　　我们用以一个表格来说明在上图的情况下，某文件引用另一文件时，所应使用的相对路径与绝对路径。　　　　

　　上表中比较需要说明的是”../../”所代表的意义。

　　“..”代表上一层目录，而”../../”所代表的是上一层目录的上一层目录。所以，从上表中可以看出，如果引用的文件存在于目前目录的子目录中，或者存在于上一层目录的 另一个子目录中，运用相对路径是比较方便的。如果不是时，则利用绝对路径。从上表中，亦可以看出，当被引用的是同一个文件时，引用文件所使用的绝对路径是一样的。

.editorconfig

1.EditorConfig和Prettier一样，都是用来配置格式化你的代码的，这个格式化代码，要和你lint配置相符！否则会出现你格式化代码以后，却不能通过你的代码校验工具的检验。

2.让使用不同编辑器的开发者在共同开发一个项目时“无痛”地遵循编码规范(编码风格)，就可以使用EditorConfig插件，会在项目根目录寻找.editorconfig文件并使用其中定义的编码风格。 默认配置

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

语法

1. editorConfig配置文件需要是UTF-8字符集编码的, 以回车换行或换行作为一行的分隔符
   斜线(/)被用作为一个路径分隔符，井号(#)或分号(;)被用作于注释. 注释需要与注释符号写在同一行

通配符

*                匹配除/之外的任意字符串
**               匹配任意字符串
?                匹配任意单个字符
[name]           匹配name中的任意一个单一字符
[!name]          匹配不存在name中的任意一个单一字符
{s1,s2,s3}       匹配给定的字符串中的任意一个(用逗号分隔) 
{num1..num2}   　匹配num1到num2之间的任意一个整数, 这里的num1和num2可以为正整数也可以为负整数

属性
所有的属性和值都是忽略大小写的. 解析时它们都是小写的

indent_size     用一个整数定义的列数来设置缩进的宽度，如果indent_style为tab，则此属性默认为tab_width
tab_width       用一个整数来设置tab缩进的列数。默认是indent_size
end_of_line     设置换行符，值为lf、cr和crlf
charset         设置编码，值为latin1、utf-8、utf-8-bom、utf-16be和utf-16le，不建议使用utf-8-bom
trim_trailing_whitespace  设为true表示会去除换行行首的任意空白字符。
insert_final_newline      设为true表示使文件以一个空白行结尾
root        　　　表示是最顶层的配置文件，发现设为true时，才会停止查找.editorconfig文件

.prettierrc（格式化配置项)

1.EditorConfig和Prettier一样，都是用来配置格式化你的代码的，这个格式化代码，要和你lint配置相符！否则会出现你格式化代码以后，却不能通过你的代码校验工具的检验。

2.当我们使用右键格式化的时候,就会自动帮我们补全符号,但是,有些符号在eslint中就会报语法错误,那我们需要怎么办呢?可以通过.prettierrc来进行文件配置

{
    "semi": false,    // 使用分号, 默认true
    "singleQuote": true,   // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "bracketSpacing": true   // 对象中的空格 默认true
}

.browserslistrc 文件

在使用脚手架搭建项目时，会自动生成.browserslistrc文件，该文件只要是 配置兼容浏览器
对于部分配置参数做一些解释:
" >1%" :代表着全球超过1%人使用的浏览器
“last 2 versions” : 表示所有浏览器兼容到最后两个版本
“not ie <=8” :表示IE浏览器版本大于8（实则用npx browserslist 跑出来不包含IE9 ）
“safari >=7”:表示safari浏览器版本大于等于7

Vue .env .env.development .env.production

1.项目根目录下创建.env、.env.development和.env.production三个文件，文件名解释分别如下： 　　.env 无论开发环境还是生产环境都会加载的配置文件 　　.env.development 开发环境加载的配置文件 　　.env.production 生产环境加载的配置文件

2.环境变量的简单使用示例。需要注意，配置文件里的属性名必须以VUE_APP_开头，比如在.env文件这样声明一个环境变量：

VUE_APP_QQQ = `QQ`

然后就可以在代码里这样用了：

console.log(process.env.VUE_APP_QQQ)  // -> `QQ`

3. 那为什么是三个文件呢？
   比如现在三个文件里内容分别如下：

// .env
VUE_APP_QQQ = `QQ`

// .env.development
VUE_APP_QQQ = `WW`

// .env.production
VUE_APP_QQQ = `RR`

那么首先，Vue在启动时，无论是在开发环境还是在生产环境，它始终都会加载.env文件里的内容，然后（划重点）=>根据Node环境变量’NODE_ENV’的值来选择加载’development’还是’production’。

比如我们平常通过npm run serve启动时，我们本地系统的环境变量NODE_ENV 值默认是development，这时就会先后加载.env和.env.development这两个文件。

而当我们打包到服务器后，服务器的NODE_ENV值一般为production，则此时Vue仍会先加载.env文件，然后加载.env.production文件。

其次，在按顺序加载文件时，Vue会把后一个加载的文件内容和前面加载的文件内容进行比较，如果存在变量名相同，那么它会采用后一个文件里的变量值为变量的最终值。

拿上面三个文件内容打个比方：我们在日常开发时，NODE_ENV值是development，那么Vue就会首先加载.env文件里的内容，然后继续加载.env.development文件里的内容。那么我们发现变量名VUE_APP_QQQ存在多个，这时Vue就会采用后一个文件里的变量值为变量的最终值。因此我们通过console输出看一看。

console.log(VUE_APP_QQQ)  // -> `WW`

.eslintrc.js

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    //设置"script"（默认）或"module"如果你的代码是在ECMAScript中的模块。
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    "no-unused-vars": [2, { 
      // 允许声明未使用变量
      "vars": "local",
      // 参数不检查
      "args": "none" 
    }],
    // 关闭语句强制分号结尾
    "semi": [0],
    //key值前面是否要有空格
     "key-spacing": [0, {
      "singleLine": {
        "beforeColon": false,
        "afterColon": true
      },
      "multiLine": {
        "beforeColon": true,
        "afterColon": true,
        "align": "colon"
      }，
    //空行最多不能超过100行
    "no-multiple-empty-lines": [0, {"max": 100}],
    //关闭禁止混用tab和空格
    "no-mixed-spaces-and-tabs": [0],
    //数组第一个指定是否启用这个规则，第二个指定几个空格
    "indent":[1,2],
}

其中的rules是配置规则的

配置参数

rules: {
    "规则名": [规则值, 规则配置]
}

规则值

"off"或者0    //关闭规则关闭
"warn"或者1    //在打开的规则作为警告（不影响退出代码）
"error"或者2    //把规则作为一个错误（退出代码触发时为1）

常见规则列表