用umi+dva+antd打造的資料視覺化平臺

MPW發表於2019-03-27
視覺化

antd-umi-sys

如果你喜歡這個專案請給一個⭐，謝謝!

Please give me a Star if you like this project.Thank you so much.

簡介

企業系統，資料視覺化平臺。
推薦瀏覽器：Google Chrome
github：https://github.com/mpw0311/antd-umi-sys
複製程式碼

技術棧

  • 前端框架：React、umi
  • 前端元件庫：antd
  • 前端資料視覺化：echarts、d3.js
  • 前端資料流管理：redux、dva
  • 語法：es6/7
  • 前端樣式：less
  • 前後端通訊：fetch
  • 專案打包：webpack

特性

  • 單頁面應用；
  • 模組化、元件化開發；
  • 結合dva基於 redux 和 redux-saga 的資料流方案；
  • 約定式路由，無需再維護一份冗餘的路由配置，支援許可權、動態路由、巢狀路由等；
  • 外掛化，一鍵實現按需載入、相容 ie9 、切換 preact等；
  • 開箱即用，無需安裝 react、preact、webpack、react-router、babel、jest 等；
  • 豐富的Echarts圖形元件：折線圖、柱狀圖、條形圖、面積圖、餅圖、桑基圖等
  • mock模擬資料請求

antd-umi-sys
antd-umi-sys
antd-umi-sys
antd-umi-sys

antd-umi-sys

環境準備

1.首先安裝 node，並確保 node 版本是 8 或以上。（mac 下推薦使用 nvm 來管理 node 版本）
    $ node -v
    8.x
2.然後全域性安裝 umi，並確保版本是 2.0.0 或以上。
    $ npm install -g umi (或yarn global add umi)
    $ umi -v
    2.0.0
3.git地址下載腳手架程式碼：
   https://github.com/mpw0311/antd-umi-sys
4.安裝依賴模組：
    npm install
5.啟動本地開發：
    npm start
6.打包釋出：
    npm run build
複製程式碼

目錄結構

├── dist/                               // 預設的 build 輸出目錄
├── mock/                               // mock 檔案所在目錄，基於 express
├── node_modules                        // 第三方類庫和工具
├── public                              // 公共的檔案（此資料夾裡的檔案不會經過打包工具處理，會原樣拷貝過去）
├── config/ 
    ├── config.js                       // umi 配置，同 .umirc.js，二選一
└── src/                                // 原始碼目錄，可選
    ├── assets                          // 公共的檔案（如圖片，js等此資料夾裡的檔案會經過webpack打包處理）
    ├── components/                      // 專案元件
    ├── layouts/                        // 全域性佈局
        ├── main/index.js               // 系統內部佈局
        ├── login/index.js              // 登入頁佈局
    ├── pages/                          // 頁面目錄，裡面的檔案即路由
        ├── .umi/                       // dev 臨時目錄，需新增到 .gitignore
        ├── document.ejs                // HTML 模板
        ├── 404.js                      // 404 頁面
        ├── login/                      // 系統登入頁面
            ├── index.js                // 登入頁ui元件
            ├── index.less              // 元件樣式
            ├── components/             
            ├── model.js                // 資料模型
            ├── sevice.js               //  資料介面
        ├── sys/                        // 系統資料夾
            ├── page/                   // 頁面 1，任意命名，匯出 react 元件
                ├── index.js            // ui元件
                ├── index.less          // 元件樣式
                ├── components/         
                    ├── component.js    // 頁面元件
                ├── model.js            // 資料模型
                ├── sevice.js           //  資料介面
    ├── utils/                          // 工具函式
    ├── themes/                         // 自定義樣式
    ├── global.css                      // 約定的全域性樣式檔案，自動引入，也可以用 global.less
    ├── global.js                       // 可以在這裡加入 polyfill
    ├── config.js                       // 系統資訊配置
├── .umirc.js                           // umi 配置，同 config/config.js，二選一
├── themes.config.js                    // 主題配置
├── .eslintrc                           // js、jsx、es6(es2015)等程式碼的檢測
├── .env                                // 環境變數
└── package.json
複製程式碼

相關文章