左小白的技术日常
Github
2020/08/15
Author: guoqzuo

vue项目文件以及文件夹命名规范问题,前端代码规范风格指南

在以vue为主的开发中,vue项目文件以及文件夹命名规范文件,在开发团队里面是需要统一的。我们尽量按照一种规范来开发,形成一种风格,这样更有利于项目迭代维护,下面来逐一介绍

个人总结的vue功能组件、目录结构风格

// 新建文件夹,命名以小写字母开头,驼峰命名
- moduleA // 模块A目录
  - comps // 组件目录
    - CustomerRefuse.vue // 单文件组件命名规则,参考vue风格指南
    // 如果组件内容较多,创建一个文件夹
    // 命名以npm包命名规则一致,全小写、-分隔,建议不超过3个单词
    - no-permission
      - src // 其他资源目录,参考Element组件源码
      - index.vue // 入口或者使用index.js 方便 Vue.use 引入
  - index.vue // 模块A入口

业界较权威的风格指南

Vue、HTML、JS、CSS编码风格,可以看看下面比较好的风格指南:

其他风格

当然你也可以使用其他风格,下面是在网上找了一个看起来还算靠谱的命名规则:

参考 Vue项目中的文件/文件夹命名规范