文件目录规范

 

【前言】

 

规范、整洁的文件目录,让人心情愉悦的同时,还能降低维护的难度,增加项目的可读性

 

由于其可复制性,由此总结出一套适用于前端的文件目录模板。

先来一张大体的目录格式:

 

 

 

【取名规则】

 

  1. 名称遵循语义化
  2. 组件名需使用大驼峰,例如:PlanSelect
  3. 文件夹、文件按中划线拼接,例如:order-form

 

 

【具体拆分】

 

接口存放:api

子文件按菜单、模块区分

 

静态资源:assets

分为fonts字体、images图片、style样式表;

images、style下子文件按菜单、模块区分。

 

全局组件:components

分为business、common子目录;

business存放通用业务组件,子文件名B开头;

common存放通用非业务组件,子文件名C开头。

 

 项目插件:plugins

分为axios、lib等;

axios存放ajax相关配置;

lib存放第三方库、sdk等。

 

项目路由、状态管理:router、store

router、store的modules下子文件以菜单、模块区分

 

 项目工具包:utils

分为enum、mixin、object、tools;

enum存放通用枚举;

mixin存放通用的拓展;

object存放通用的封装对象;

tools存放全局通用方法。

 

菜单文件页:page

首层分为components、modules、page、style、utils、index.vue;

components存放当前菜单包含的组件;

modules存放菜单的模块,非页面、非组件(弹窗、表单、区块等等);

page放当前菜单下的二级菜单,子文件夹取自子页面名;

style存放菜单下可复用的样式;

utils结构与前面结构相同,不同在于存放的是本菜单下的枚举、拓展、对象、方法,而非全局性的;

index.vue是当前一级菜单的界面。

 

 

Ps: 做到这些,就会使项目看起来更加清晰、简洁

 

 

posted @ 2023-11-30 16:41  一杯龙井解千愁  阅读(68)  评论(0编辑  收藏  举报