要遵守的规则
-
组件名为多个单词,用短线连接,如:todo-item
-
组件的data必须为函数
-
props的定义应尽量详细(标明变量的类型、默认值等)
-
为v-for设置键值(key)
-
避免v-for和v-if一起使用
-
组件样式添加作用域scoped(避免不同组件间的样式污染)
-
class名称遵循BEM规范
https://www.w3cplus.com/css/bem-definitions.html -
私有属性名用$my或者mMy
最好遵守的规则
- 把每个组件单独作为文件
- 组件文件的大小写:MyComponent
- 基础组件名:Bass / App/V
- 和父组件紧密耦合的子组件应该以父组件名作为前缀,如:
TodoList.vue -> TodoListItem.vue
- 组件名以高级别的单词开头,以描述性的修饰词结尾。
- 在单文件组件、字符串模板和JSX中,没有内容的组件应该是自闭合的(<MyComponent/>)。在DOM模板中为<my-component></my-component>
- JS/JSX中的组件名大小写
export default{name:MyComponent}
import MyComponent from '@/MyComponent'
- 组件名应该倾向于完整单词,而不是缩写(名称过长没关系,只要能表达清楚意思)
- prop命名大小写
<welcomeMessage gretting-text = 'hi'/>
props:{greetingText:string}
- 多个特性的元素分多行编写,每个特性一行
<img
src = './logo.png'
alt = 'logo'
/>
- DOM中的表达式改为计算属性
- 将复杂的计算属性分为多个简单属性
- 带引号的特性值
<input type = "text"/>
<AppSlidebar :style="{width:w+'px'}"/>
- 指令缩写都用或者都不用
网友评论