一、 文件/文件夹命名规范

1. src/Views

• 以一级菜单或模块分文件夹：权限管理、会员管理
• 文件夹为大驼峰命名：PermissionManagement、Login
• 各个模块下页面以页面path大驼峰命名：MemberList.vue、MenuManagement.vue
• 不要用index.vue文件，除非该菜单下包含三级路由：列表详情需要单独页面，可以把列表和详情页都放在三级菜单，index.vue作为router-view容器
• 模块下的静态数据、类型定义、脱耦方法、复杂方法、数据处理方法等可提取的一切都放到对应模块下的js中，以功能创建文件：const.ts、func.ts、types.ts
• 模块下组件提取到component文件夹下，页面组件非必要不提取，必要条件：单独功能点（上下文耦合极低）、复用（覆盖超过80%）

2. src/components

• 组件本身使用大驼峰命名
• 0耦合组件直接放在basic文件夹下：任何项目都可以用 Icon.vue
• 本项目组件按照组件类型分文件夹：2种表格/table/DefaultTable.vue和/table/ColorTable.vue、/modal/DefaultDialog.vue

3.其他

• 任何文件命名都要规范，最少做到望文知义

二、src/styles/提取规范

• 提取的样式一般不涉及业务
• 提取的颗粒度做到最小
• 提取的样式class以功能命名：m-top-16(mt-16)，text-aline-center(ta-center)
• 提取的样式的值必须是项目中常用的：例如padding和margin一般ui设计的时候都是有规范的，例如8px、16px、24px或者10px、20px、30px之类的，例如flex定义为1的情景，特殊场景在vue文件内自定义
• ui框架需要统一样式覆盖的情景（官方方案满足不了），样式覆盖外层一定要带上业务class，避免影响到其他同事的页面，需要覆盖的页面直接附上class即可
• 业务样式不需要提取，复用性高的话就要考虑为什么不提取组件了
• class都是以小写中划线命名，别和我说什么方便复制
• 补充一点：通用class以功能命名，那么业务class就一定是以业务来命名：user-block、username、user-age，2种命名不要弄混了

三、src/components/提取规范

• 组件比较复杂或和业务关联性比较强的时候，可以对组件本身进行拆分
• 组件的不同情景尽量使用slot，不要使用if-else
• 组件的样式尽量不使用公共class，而是再组件内部消化（方便其他项目单独使用）

四、src/utils/、src/const/、src/hooks/提取规范

• utils 为全局工具类，里面是全局的方法：request.ts、dateFormate.ts、auth.ts
• const为项目常量，一般是键值对、固定的数据列表等，最好按照业务模块文件区分
• hooks前提必须先明白什么是hook，然后再进行提取，理论上hook对业务是极低耦合的：每个页面都要记录用户行为，那么点击上报这就是一个hook
• 当然要utils干净一点，可以有一个单独的func文件夹，用来放公共方法

五、其他规范（参考）

https://www.jianshu.com/p/85e93d2ce8f6
https://gitee.com/webxingjie/document/blob/master/前端开发规范.md

未完待续