React專案針對目錄結構的改造

2021-08-16 04:58:08 字數 1046 閱讀 7587

前端技術 react.js + antd + css

src下的原目錄結構:

|——components  #元件

|——bar  #導航欄、操作欄等

|——content #內容展示

|——dataentry #資料輸入元件

|——feedback #模態框、氣泡等反饋元件

|——menu #選單元件

|——mobile #手機端元件

|——utils #工具元件

|——pages #頁面

|——mobilepage #手機頁面

|——index.js

|——index.css

|——route.js #路由

針對原目錄改進了以下幾個問題:

1. 手機、pc端徹底分開,原目錄以pc為主,手機呼叫部分pc的元件,現完全拆分成兩個目錄

2. 資料與介面未分層,增加service目錄

3. 通用的工具與css放入的目錄較深,不方便其他元件呼叫,現置於一級目錄

改進後的目錄結構為:

|——components

|——pc

|——mobile

|——common

|——pages

|——pc

|——mobile

|——service

|——utils

|——css

|——index.js

|——index.css

|——route.js

由於專案手機端功能要求不高,使用pc端的部分元件與功能,因此未將手機端完全拆分出來。

後續專案改造方向:

1. 目前使用css寫樣式,大量重複,後續使用less代替css進行樣式的開發。

2. 未使用redux作狀態管理,元件之間狀態資訊混亂,後續使用mobx進行狀態管理(待定,由於react 16.3 alpha版本引入context api)

改進後的技術為  react.js + antd + less + mobx

React和VUE專案推薦目錄結構

api 介面目錄 components 公共元件 或common pages 元件目錄 orders 訂單目錄 components 相關元件 store 倉庫 actioncreators.js actiontypes.js index.js reducer.js index.js 預設元件 st...

React安裝及目錄結構

構建react專案的幾種方式 構建 generator react webpack 構建 webpack一步一步構建 1 安裝cnpm 國內使用 npm 速度很慢,你可以使用 定製的 cnpm gzip 壓縮支援 命令列工具代替預設的 npm sudo npm install g cnpm regi...

基於react的前端專案結構

build 編譯目錄 config webpack配置 public 公共檔案 可以放一些第三方字型 樣式庫等 scripts 啟動指令碼 src asset 靜態資源 components 公共元件目錄 當業務需要拆分元件的時候,可以在對應的業務資料夾下單獨建立乙個components資料夾 mo...