React 一個較為完善的前端框架
阿新 • • 發佈:2018-02-10
react 輪播 創建 sem ont 鏡像源 建議 tables 2.0
- 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 一個較為完善的前端框架