【Vue项目】项目风格命名规范以及规则

官方文档的风格指南

命名规范

对于项目开发时,因为没有接触严格的文件命名规范学习,所以有时候文件命名不规范,经常驼峰,大写开头以及横线连接混合使用,造成了不好的视觉效果,整理一下项目文件规范来规范自己以后的代码开发

Component

所有Component文件都是以大写开头,但是除了index.vue

例如:

@/src/components/BackToTop/index.vue
@/src/components/Charts/Line.vue
@/src/views/example/components/Button.vue

JS 文件

所有的.js文件都遵循横线连接
例如:

@/src/utils/open-window.js
@/src/views/svg-icons/require-icons.js
@/src/components/MarkdownEditor/default-options.js

Views

views文件下,代表路由的.vue文件都使用横线连接,代表路由的文件夹也是用同样的规则
例如:

@/src/views/svg-icons/index.vue
@/src/views/svg-icons/require-icons.js

使用横线连接来命名views主要是出于以下几个考虑。

  • 横线连接 (kebab-case) 也是官方推荐的命名规范之一 文档
  • views下的.vue文件代表的是一个路由,所以它需要和component进行区分(component 都是大写开头)
  • 页面的url 也都是横线连接的,比如https://www.xxx.admin/export-excel,所以路由对应的view应该要保持统一
  • 没有大小写敏感问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值