文件目录规范

标签：style 菜单 文件目录 规范 存放 组件 通用

【前言】

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

 

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

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

 

【取名规则】

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: 做到这些，就会使项目看起来更加清晰、简洁

标签：style,菜单,文件目录,规范,存放,组件,通用
From： https://www.cnblogs.com/wx3091/p/17867737.html