1. 程式人生 > >React 一個較為完善的前端框架

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

react 輪播 創建 sem ont 鏡像源 建議 tables 2.0

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

依賴模塊

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

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

功能模塊

備註:項目只引入了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 一個較為完善的前端框架