依賴模塊
項目是用create-react-app創建的，主要還是列出新加的功能依賴包
點擊名稱可跳轉相關網站😄😄
- react@15.5.0
- react-router@3.0.2(react路由,4.x的差異還是比較大，暫時還是3.x的版本)
- antd@2.9.3(螞蟻金服開源的react ui組件框架)
- axios@0.16.1(http請求模塊，可用於前端任何場景，很強大👍)
- echarts-for-react@1.2.0(可視化圖表，別人基於react對echarts的封裝，足夠用了)
- recharts@0.22.3(另一個基於react封裝的圖表，個人覺得是沒有echarts好用)
- nprogress@0.2.0(頂部加載條，蠻好用👍)
- react-draft-wysiwyg@1.9.6(別人基於react的富文本封裝，如果找到其他更好的可以替換)
- react-draggable@2.2.4(拖拽模塊，找了個簡單版的)
- screenfull@3.2.0(全屏插件)
- photoswipe@4.1.2(圖片彈層查看插件，不依賴jQuery，還是蠻好用👍)
- animate.css@3.5.1(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
-