????????最開是接觸的混合框架是mui，當時覺mui有一個很大的不方便，不能如當今vue或者react一樣組件化開發(fā)，很多這樣的場景，每個APP都有頭部，每次都要去復制粘貼頭部的樣式改一下每個都要改很不方便，之后慢慢接觸react和vue，覺得這兩個框架能和mui擦出不錯的火花，完成組件開發(fā)。

? ? ? ? 這樣做在我看來的優(yōu)勢：

? ? ? ? ? ? ????1、組件化開發(fā)，重用性和易改性提高。

? ? ? ? ? ? ? ? 2、單向綁定，數(shù)據(jù)流清晰，減少dom操作。

????????缺點：真機調(diào)試速度慢

????????下面開始我的嘗試，vue或許會更好，下次再研究。

這是我的文件結構

? ? ? ? config----為webpack配置文件

? ? ? ? dist? ? ---為打包后的文件

? ? ? ? src? ? ?---為我們開發(fā)時所用的文件

????????????????component --- 公用組件

????????????????css --- 公用css

? ? ? ? ? ? ? ? fonts---字體文件

? ? ? ? ? ? ? ? login---登陸頁面

? ? ? ? ? ? ? ? main---首頁

? ? ? ? ? ? ? ? .........

? ? ? ? unpackage和manifest.json? --- 為mui APP文件

? ? ? ? index.ejs? ?--- 為生成每個頁面的模板html

? ? ? ? package.json --- 配置文件

? ? ? ? 貼出簡易的公用header組件代碼：

可以把所以頭部的展示都寫上，然后根據(jù)props來切換不同的Header

????????使用react+mui有一個不方便的地方，便是文件越大，打包時間越長，會延長測試代碼時間。所以個人建議前期做UI時使用熱替換，在本地瀏覽器查看樣式，這樣速度快很多。還有不方便的地方便是需要把class切換成className。或許vue更為優(yōu)秀。有一樣想法的朋友可以一起探討。

源碼下載地址：github.com/wenlei0617/mui-react? ? ? ??