• GitHub地址
• 預覽地址(已增加響應式，可手機預覽??)

依賴模塊

項目是用create-react-app創建的，主要還是列出新加的功能依賴包

點擊名稱可跳轉相關網站????

• [email protected]
• [email protected](react路由,4.x的差異還是比較大，暫時還是3.x的版本)
• [email protected](螞蟻金服開源的react ui組件框架)
• [email protected](http請求模塊，可用於前端任何場景，很強大??)
• [email protected](可視化圖表，別人基於react對echarts的封裝，足夠用了)
• [email protected](另一個基於react封裝的圖表，個人覺得是沒有echarts好用)
• [email protected](頂部加載條，蠻好用??)
• [email protected](別人基於react的富文本封裝，如果找到其他更好的可以替換)
• [email protected](拖拽模塊，找了個簡單版的)
• [email protected](全屏插件)
• [email protected](圖片彈層查看插件，不依賴jQuery，還是蠻好用??)
• [email protected](css動畫庫)
• 其他小細節省略

功能模塊

備註：項目只引入了ant-design的部分組件，其他的組件antd官網有源碼，可以直接復制到項目中使用，後續有時間補上全部組件。 項目使用了antd的自定義主題功能-->黑色，若想替換其他顏色，具體操作請查看antd官網

• 首頁
  • 完整布局
  • 換膚(全局功能，暫時只實現了頂部導航的換膚，後續加上其他模塊)
• 導航菜單
  • 頂部導航(菜單伸縮，全屏功能)
  • 左邊菜單(增加滾動條以及適配路由的active操作)
• UI模塊
  • 按鈕(antd組件)
  • 圖標(antd組件並增加彩色表情符)
  • 加載中(antd組件並增加頂部加載條)
  • 通知提醒框(antd組件)
  • 標簽頁(antd組件)
  • 輪播圖(ant動效組件)
  • 富文本
  • 拖拽
  • 畫廊
• 動畫
  • 基礎動畫(animate.css所有動畫)
  • 動畫案例
• 表格
  • 基礎表格(antd組件)
  • 高級表格(antd組件)
  • 異步表格(數據來自掘金醬的接口)
• 表單
  • 基礎表單(antd組件)
• 圖表
  • echarts圖表
  • recharts圖表
• 頁面
  • 登錄頁面(包括GitHub第三方登錄)
  • 404頁面

    • 代碼目錄

      +-- build/                                  ---打包的文件目錄
      +-- config/                                 ---npm run eject 後的配置文件目錄
      +-- node_modules/                           ---npm下載文件目錄
      +-- public/                                 
      |   --- index.html							---首頁入口html文件
      |   --- npm.json							---echarts測試數據
      |   --- weibo.json							---echarts測試數據
      +-- src/                                    ---核心代碼目錄
      |   +-- axios                               ---http請求存放目錄
      |   |    --- index.js
      |   +-- components                          ---各式各樣的組件存放目錄
      |   |    +-- animation                      ---動畫組件
      |   |    |    --- ...   
      |   |    +-- charts                         ---圖表組件
      |   |    |    --- ...   
      |   |    +-- dashboard                      ---首頁組件
      |   |    |    --- ...   
      |   |    +-- forms                          ---表單組件
      |   |    |    --- ...   
      |   |    +-- pages                          ---頁面組件
      |   |    |    --- ...   
      |   |    +-- tables                         ---表格組件
      |   |    |    --- ...   
      |   |    +-- ui                             ---ui組件
      |   |    |    --- ...   
      |   |    --- BreadcrumbCustom.jsx           ---面包屑組件
      |   |    --- HeaderCustom.jsx               ---頂部導航組件
      |   |    --- Page.jsx                       ---頁面容器
      |   |    --- SiderCustom.jsx                ---左邊菜單組件
      |   +-- style                               ---項目的樣式存放目錄，主要采用less編寫
      |   +-- utils                               ---工具文件存放目錄
      |   --- App.js                              ---組件入口文件
      |   --- index.js                            ---項目的整體js入口文件，包括路由配置等
      --- .env                                    ---啟動項目自定義端口配置文件
      --- .eslintrc                               ---自定義eslint配置文件，包括增加的react jsx語法限制
      --- package.json                                    

      安裝運行

      1.下載或克隆項目源碼

      2.npm安裝相關包文件(國內建議增加淘寶鏡像源，不然很慢，你懂的??)

      npm i

      3.啟動項目

      npm start

      4.打包項目

      npm run build

React 一個較為完善的前端框架