用umi+dva+antd打造的數據可視化平臺

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

環境準備

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
複製代碼