ESLint和元件定義

ESLint

1. 說明

1）ESLint 是一個程式碼規範檢查工具

2）它定義了很多特定的規則, 一旦你的程式碼違背了某一規則, eslint 會作出非常有用的提示

3）官網: http://eslint.org/

4）基本已替代以前的 JSLint

2. ESLint 提供以下支援

1）ES

2）JSX

3）style 檢查

4）自定義錯誤和提示

3. ESLint 提供以下幾種校驗

1）語法錯誤校驗

2）不重要或丟失的標點符號，如分號

3）沒法執行到的程式碼塊

4）未被使用的引數提醒

5）確保樣式的統一規則，如 sass 或者 less

6）檢查變數的命名

4. 規則的錯誤等級有三種

1）0：關閉規則。

2）1：開啟規則，並且作為一個警告（資訊列印黃色字型）

3）2：開啟規則，並且作為一個錯誤（資訊列印紅色字型）

5. 相關配置檔案

1）.eslintrc.js : 全域性規則配置檔案

'rules': {
'no-new': 1
}
2）在 js/vue 檔案中修改區域性規則

/* eslint-disable no-new */
new Vue({
el: 'body',
components: { App }
})
3）.eslintignore: 指令檢查忽略的檔案

*.js
*.vue

元件定義與使用

1. vue 檔案的組成(3 個部分)

1）模板頁面

<template>
頁面模板
</template>
2）JS 模組物件

<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
3）樣式

<style>
樣式定義
</style>

2. 基本使用

1）引入元件

2）對映成標籤

3）使用元件標籤

<template>
<HelloWorld></HelloWorld>
<hello-world></hello-world>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
    components: { 
        HelloWorld
    }
}

</script>

3. 關於標籤名與標籤屬性名書寫問題

1）寫法一：一模一樣

2）寫法二：大寫變小寫, 並用-連結