對路徑-以引用文件之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存于不同目錄的網頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對。

絕對路徑-以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）

常見規則列表