Vue单文件组件命名规范

Vue单文件组件命名规范

一直想写一篇Vue项目结构及组件内属性 方法命名规范的博客,今天终于腾出时间来写了,也算是个人的总结;这篇博客借鉴了另一篇博客,值的推荐,个人也是在此基础上加了一些个人的习惯用法;

views文件夹及子级命名

views文件夹是所有视图的文件入口,包括所有的视图以及视图集合模块

views下文件夹

1. views 下面的文件夹代表着模块的名字,一般由单个小写名词命名,以便与vue文件区分,(good: car order cart bad: carInfo carpage)

views下vue文件

1. views 下面的 vue 文件代表着页面的名字,只有一个文件的情况下直接放在文件夹之下,例如Login Home
2. 以名词命名,大写开头，开头的单词即所属模块名字（CarDetail、CarEdit、CarList）
3. 常用结尾单词有（Detail、Edit、List、Info、Report）
4. 以 Item 结尾的代表着页面复用的组件（CarListItem、CarInfoItem）

vue单文件组件属性命名

vue固定属性声明顺序

这个顺序纯是个人习惯,不喜欢可以按照自己的习惯声明就好;

1. name
2. components
3. props
4. data
5. computed
6. methods
7. watch
8. filter
9. created mounted beforeUpdate等常用的生命周期
10. beforeRouteEnter beforeRouteUpdate等组件内路由生命周期

剩下的不再列举,根据个人习惯就好;个人建议状态类属性 函数类属性作为两个大的集合区分

method 命名

1. ajax 方法以 get、post 开头，以 data 结尾（**good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）
2. 事件方法以 on 开头（onTypeChange、onUsernameInput）
3. 逻辑处理方法,语义化命名;handleSearch handleUpdate
4. 遵循驼峰命名法

data props computed 命名及注意

1. 使用 data 里的变量时必须先在 data 里面初始化
2. props 指定type及默认值
3. 个人建议用 名词与 _ 组合命名,例如xx_xx_xx,在管理state比较多时,省的苦思冥想那么多命名
4. 表单数据请包裹一层 form,在其中声明每个表单域对应的命名即可

就是这些,有错误欢迎指正;