Vue.js开发规范

学习了太多的语言和框架,最终会导致很多语法和规范会搞混,相比较Java和Go统一的文件和文件命名来说,Vue.js的规范更多一些,养成一个好的开发习惯,可以让我们的项目一目了然。

命名规范

组件命名

全部统一大驼峰(PascalCase)或者肉串(kebab-case)

文件夹命名

属于components文件夹下的子文件夹,使用大写字母开头的PascalBase风格,其他文件夹统一使用kebab-case的风格

  1. 全局通用的组件放在 /src/components下
  2. 其他业务页面中的组件,放在各自页面下的 ./components文件夹下
  3. 每个components文件夹下最多只有一层文件夹,且文件夹名称为组件的名称,文件夹下必须有index.vue或index.js,其他.vue文件统一大写开头(Pascal case),components下的子文件夹名称统一大写开头(PascalCase)

文件命名

  1. *.js文件命名规范

    • 属于类的.js文件,除index.js外,使用PascalBase风格
    • 其他类型的.js文件,使用kebab-case风格
    • 属于Api的,统一加上Api后缀
  2. *.vue文件命名规范 除index.vue之外,其他.vue文件统一用PascalBase风格

  3. *.less文件命名规范 统一使用kebab-case命名风格

参考

  1. vue.js风格指南
  2. Vue项目中的文件/文件夹命名规范
  3. Vue前端开发规范