vue项目文件命名规范推荐

📘 项目命名

mall-management-system // good
mall_management-system // bad
mallManagementSystem // bad

📁 文件夹文件

超过一个单词的统一使用小写字母开头的(kebab-case)命名规范,如show-contentcommodity

📖 Vue 文件命名

除了 index.vue文件,件统一使用大驼峰的形式命名 (PascalCase),如SideMenu.vueSideMenu.vueButton.vue
Input.vue

🎑Js|Css|图片 文件

使用短横线连接的形式命名,比如init-dialog.jsindex.jselement-button.scsslogo-bg.png,图片文件禁止使用中文命名。

🚀 路由命名规范

路由命名采用全小写,单词用-隔开格式 因为如果你使用下划线或者驼峰形式,会被当成一个单词,搜索引擎无法区分语义,而 - 隔开会显得更加直观和漂亮

🐫 vue组件文件顶部注释

/**
* @func
* @todo (该函数描述)
* @param {string/类型定义} a - 参数a的描述
* @param {object/类型定义} b - 参数b的描述
* @param {object[]/类型定义} c - 参数c的描述(可选)
* @returns {Object} 返回值描述
**/

🚿 CSS样式注释

/* header */
.header{…}
/*end header */

💫 变量

1.公开变量 使用 Camel 命名法。let showBox= { };
2.私有属性变量和方法 以下划线 _ 开头 。let _privateMethod = { };
3.私有属性、变量和方法 以下划线 _ 开头 。let _privateMethod = { };
4.常量 使用全部字母大写,单词间下划线分隔的命名方式。const HTML_ENTITY = { };

⚡️ 函数

使用 Camel 命名法。函数的参数, 使用 Camel 命名法。
多使用使用动宾短语canShowgetStylesetStyle
function toString(source) { }
function getData(theBells) { }

  • 13
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@才华有限公司

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值