0
点赞
收藏
分享

微信扫一扫

【前端】1.学习了一段时间的vue,总结一下Vue书写规范

彩虹_bd07 2022-10-22 阅读 127

学习了一段时间的vue,总结一下Vue书写规范


学习vue规范

命名规范

在团体开发项目中,为了团队所有成员书写可维护的代码,而不是一次性的代码,让团队当中其他人看你的代码能一目了然,甚至过一段时间时候后你再回来看你自己某个时候写的代码也能看明白,所以命名很重要的。

普通变量命名规范

命名方法 :驼峰命名法
命名规范 :

常量命名规范

命名方法 : 全部大写
命名规范 :

 const MAX_COUNT = 10
 const URL = 'https://www.csdn.net/

组件命名规范

官方文档推荐及使用遵循规则:

有意义的名词、简短、具有可读性,命名遵循 PascalCase 约定
公用组件以 Abcd (公司名缩写简称) 开头,如( AbcdDatePicker,AbcdTable)
页面内部组件以组件模块名简写为开头,Item 为结尾,如( StaffBenchToChargeItem,StaffBenchAppNotArrItem)使用遵循 kebab-case 约定

在页面中使用组件需要前后闭合,并以短线分隔,如( ,),导入及注册组件时,遵循 PascalCase 约定,同时还需要注意:必须符合自定义元素规范: 切勿使用保留字。

method 方法命名命名规范

驼峰式命名,统一使用动词或者动词+名词形式

//bad
go、nextPage、show、open、login
// good
jumpPage、openCarInfoDialog
请求数据方法,以 data 结尾

//bad
takeData、confirmData、getList、postForm
// good
getListData、postFormData
init、refresh 单词除外

尽量使用常用单词开头(set、get、go、can、has、is)
附: 函数方法常用的动词:

views 下的文件命名

只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 index.vue
尽量是名词,且使用驼峰命名法。

开头的单词就是所属模块名字(workbenchIndex、workbenchList、workbenchEdit)
名字至少两个单词(good: workbenchIndex)(bad:workbench)

props 命名规范

在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用
kebab-case

例外情况
作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。
循环变量可以简写,比如:i,j,k 等。

结构化规范

目录文件夹及子文件规范

src 源码目录

以上是vue项目中的 文件基本结构,都是这样组成的。规范的命名和基本的文件结构方便我们更好的理代码和维护代码。

举报

相关推荐

0 条评论