依賴模塊
項目是用create-react-app建立的，主要仍是列出新加的功能依賴包css
點擊名稱可跳轉相關網站😄😄html
- 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
-