为了账号安全,请及时绑定邮箱和手机立即绑定

前端开发规范

标签:
Vue.js

前端开发规范

文件命名

为了能准确区分各个文件或资源的用处,需对文件命名进行规范处理。

图片资源

图片资源放置在 "src/assets" 文件夹下

类型

描述

举例

图标[默认]

icon-*

icon-home

图标[焦点]

icon-*_active

icon-home_active

背景图

background-*

background-banner

logo

logo-*

logo-javashop

占位图

placeholder-*

placeholder-image

其它

other-*

other-xxx

Vue文件

  • 单词首字母大写

例如:MyVueFile

JS文件

  • 单词小写

  • 多个单词以横杠隔开

例如:my-js-file

代码中的命名

class命名

  • 单词小写

  • 多个单词以横杠隔开

例如:sidebar-container

js代码

  • 变量、常量

类型

描述

举例

普通变量

驼峰式

const myName = 'XiaoMing'

临时变量

_驼峰式

let _tempArray = new Array(10)

方法

驼峰式

const myFun = () => {}

  • 方法[函数]

类型

描述

举例

普通方法

驼峰式

const myFun = () => {}

用于数据交互

[交互类型]_[单词首字母大写]

GET_GoodsList 、POST_UserData 、 DELETE_Orders

其它命名

  • 状态命名

类型

描述

举例

多选

checked

const checked = true / false

单选

checked

const checked = true / false

下拉选择

selected

const selected = true / false

禁用状态

disabled

const disabled = true / false

加载中

loading

const loading = true / false

 


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消