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)模板页面
页面模板
2)JS 模块对象
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
3)样式
样式定义
2. 基本使用
1)引入组件
2)映射成标签
3)使用组件标签
import HelloWorld from './components/HelloWorld'
exportdefault{components: { HelloWorld }}
</script>
3. 关于标签名与标签属性名书写问题
1)写法一:一模一样
2)写法二:大写变小写, 并用-连接