本文罗列在代码实践中涉及命名时需要考虑的主要规范。Vue中更多命名相关的规范详情请参考《风格指南》。
1. 组件的命名：
1.1 组件名应该由多个单词组成，并采用PascalCase的命名方式。（规范索引）
| Good | Bad |
|---|
| NewsList.vue | News.vue |
1.2 子组件的名字里以父组件名作为前缀。（规范索引）
| Good | Bad |
|---|
| components/- NewsList.vue - NewsListItem.vue | components/ - NewsList.vue - NewsItem.vue |
2. 代码相关命名：
2.1 一般采用驼峰（camelCase）的形式。采用大写驼峰（PascalCase）的情况参考原则2.3。
| Good | Bad |
|---|
| let newsList = []; | let NewsList = []; |
| var newsInfo = {}; | var NewsInfo = {}; |
2.2 命名表意明确，言简意赅
标准：除编码者以外其他人看到变量即明白大致用途。
| Good | Bad |
|---|
| let newsList = []; | let a = []; |
| let deletedNewsList = []; | let a1 = []; |
| var newsInfo = {}; | var n1 = {}; |
2.3 类名（可以使用 new来实例化的）采用大写驼峰（PascalCase）的形式；
| Good | Bad |
|---|
| js let eventBus = new Vue(); | let FilterArray = []; |
2.4 函数名一般也采用驼峰形式。一般以动词来开头，表示该函数所要完成的事，或以“on”开头表示要响应的事件等。
| Good | Bad |
|---|
| function loadScript() {}; | function script(); |
| function onScroll() {}; | function scrolling(); |
2.5 CSS类名采用短横线命名法（kebab-case），即全部以小写字母书写，以短线“-”分隔。
| Good | Bad |
|---|
| .news-title{} | .newsTitle{} |
| #news-link {} | #NewsLink{} |
2.6 建议：布尔类型的变量命名时以“is”、“if”等单词开头，表意上能凸显它是布尔变量。
| Good | Bad |
|---|
| let isActive = false; | let active = false; |
| let ifLogin = true; | let login = true; |
