#yyds幹貨盤點# 【React工作記錄四十六】react中的目錄規範

前言

我是歌謠 我有個兄弟 巅峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷

導語

日常的工作中 我們難免會有關于工作的一些規範 還是需要遵守的 這邊大概展示一下自己項目中的規範 便于檢視

 目錄規範

#### 目錄規範：

```
config
├── config.js         umi 配置目錄
├── plugin.config.js  webpack插件配置目錄
└── router.config.js  路由配置目錄

src:
靜态資源目錄: assets 
公共元件目錄：common
業務元件目錄: components 
主架構目錄：layouts
國際化目錄：locales
本地資料模拟目錄: mocks 
狀态管路目錄：models
頁面目錄： pages 
請求接口檔案目錄：request
服務api接口管理目錄： services 
樣式目錄：style
公共函數方法目錄: utils 
icon目錄: icons 
```      

新增頁面檔案夾時請遵守此限制！

```
System                子產品目錄
├── components        目前子產品抽取公用元件
├── models            目前子產品的資料(可選：頁面多的寫到頁面下)，
├── Employee          員工管理
      ├── models      目前頁面的資料（可選：頁面少的寫到），
      ├── employee    員工管理的資料流
      ├── components  目前頁面抽取封裝元件
      ├── data.js     頁面輔助方法或配置(可選) 
      ├── index.js    頁面邏輯，隻放子元件的封裝
      ├── index.less  樣式
```


**說明：頁面抽取或封裝子元件裡面，不要寫邏輯代碼，更不要處理資料。
子元件隻做資料展示使用，把邏輯處理和資料處理
都放到 `index.js` 裡面。`index.js` 做目前頁面的所有資料處理。
資料請求都放到 `models`。這樣開發時我們
隻需要去關注某個點。邏輯的修改和bug隻關注index 檔案，頁面的展示在子元件裡面 。**      

總結