前端技術 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...