文件目录规范

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

【前言】

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

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

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

目录-1.png

【取名规则】

名称遵循语义化

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

【具体拆分】

接口存放:api
子文件按菜单、模块区分

文件目录-1.png

静态资源:assets
分为fonts字体、images图片、style样式表;
images、style下子文件按菜单、模块区分。

文件目录-2.png

全局组件:components
分为business、common子目录;
business存放通用业务组件,子文件名B开头;
common存放通用非业务组件,子文件名C开头。

文件目录-3.png

项目插件:plugins
分为axios、lib等;
axios存放ajax相关配置;
lib存放第三方库、sdk等。

文件目录-4.png

项目路由、状态管理:router、store
router、store的modules下子文件以菜单、模块区分

文件目录-5.png

项目工具包:utils
分为enum、mixin、object、tools;
enum存放通用枚举;
mixin存放通用的拓展;
object存放通用的封装对象;
tools存放全局通用方法。

文件目录-6.png

菜单文件页:page
首层分为components、modules、page、style、utils、index.vue;
components存放当前菜单包含的组件;
modules存放菜单的模块,非页面、非组件(弹窗、表单、区块等等);
page放当前菜单下的二级菜单,子文件夹取自子页面名;
style存放菜单下可复用的样式;
utils结构与前面结构相同,不同在于存放的是本菜单下的枚举、拓展、对象、方法,而非全局性的;
index.vue是当前一级菜单的界面。

文件目录-7.png

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

目录
打赏
0
3
3
0
35
分享
相关文章
|
4月前
实现文件目录结构功能
实现文件目录结构功能
31 1
java中实现File文件的重命名(renameTo)、将文件移动到其他目录下、文件的复制(copy)、目录和文件的组合(更加灵活方便)
这篇文章介绍了Java中使用`renameTo()`、`Files.copy()`等方法对文件进行重命名、移动和复制的操作,并提供了代码实例和测试效果。
java中实现File文件的重命名(renameTo)、将文件移动到其他目录下、文件的复制(copy)、目录和文件的组合(更加灵活方便)
xdg - 获取 XDG 标准目录路径
xdg - 获取 XDG 标准目录路径
186 0
|
10月前
文件目录类(一)
文件目录类(一)。
46 1
|
10月前
熟练使用文件目录类命令(2)
熟练使用文件目录类命令(2)。
85 1
Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀)
Gulp 打包压缩 js 文件到指定目录详细流程(修改文件名与后缀)
54 0
Python 文件复制&按目录树结构拷贝&批量删除目录及其子目录下的文件
Python 文件复制&按目录树结构拷贝&批量删除目录及其子目录下的文件
195 0
python相对路径文件无法读取,更改工作路径
python相对路径文件无法读取,更改工作路径
python相对路径文件无法读取,更改工作路径