【前言】

規(guī)范、整潔的文件目錄，讓人心情愉悅的同時，還能降低維護(hù)的難度，增加項(xiàng)目的可讀性

由于其可復(fù)制性，由此總結(jié)出一套適用于前端的文件目錄模板。

先來一張大體的目錄格式：

【取名規(guī)則】

1. 名稱遵循語義化
2. 組件名需使用大駝峰，例如：PlanSelect
3. 文件夾、文件按中劃線拼接，例如：order-form

【具體拆分】

接口存放：api

子文件按菜單、模塊區(qū)分

靜態(tài)資源：assets

分為fonts字體、images圖片、style樣式表；

images、style下子文件按菜單、模塊區(qū)分。

全局組件：components

分為business、common子目錄；

business存放通用業(yè)務(wù)組件，子文件名B開頭；

common存放通用非業(yè)務(wù)組件，子文件名C開頭。

 項(xiàng)目插件：plugins

分為axios、lib等；

axios存放ajax相關(guān)配置；

lib存放第三方庫、sdk等。

項(xiàng)目路由、狀態(tài)管理：router、store

 項(xiàng)目工具包：utils

分為enum、mixin、object、tools;

enum存放通用枚舉；

mixin存放通用的拓展；

object存放通用的封裝對象；

tools存放全局通用方法。

菜單文件頁：page

首層分為components、modules、page、style、utils、index.vue；

components存放當(dāng)前菜單包含的組件；

modules存放菜單的模塊，非頁面、非組件（彈窗、表單、區(qū)塊等等）；

page放當(dāng)前菜單下的二級菜單，子文件夾取自子頁面名；

style存放菜單下可復(fù)用的樣式；

utils結(jié)構(gòu)與前面結(jié)構(gòu)相同，不同在于存放的是本菜單下的枚舉、拓展、對象、方法，而非全局性的；

index.vue是當(dāng)前一級菜單的界面。

Ps: 做到這些，就會使項(xiàng)目看起來更加清晰、簡潔