ant-design-pro實戰篇：快速搭建屬於你的項目

時間 2019-11-30

原文原文鏈接

一切盡在前端潮咖技術社區: 前端

一.什麼是ant-design-pro

Ant Design Pro 是一個企業級中後臺前端/設計解決方案，它秉承 Ant Design 的設計價值觀，致力於在設計規範和基礎組件的基礎上，繼續向上構建，提煉出典型模板/業務組件/配套設計資源，進一步提高企業級中後臺產品設計研發過程當中的『用戶』和『設計者』的體驗。java

簡而言之，antd-pro是基於ant-design UI框架搭建的完整前端腳手架。node

使用antd-pro 以前，開發的同窗們最好了解 ES2015+、React、UmiJS、dva、g2 、 antd以及React Router v4的基礎知識，這將爲你的開發工做提供必要的基礎。react

==你的本地環境須要安裝 yarn（或npm）、node 和 git。本章節將會使用Visual Studio Code編輯器，你須要本地安裝它。==git

二.本地安裝

方法一：git安裝

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
 cd my-project 
 npm install //安裝依賴
 npm start   //運行項目
複製代碼

方法二：使用ant-design-pro-cli腳手架

全局安裝集成化的 ant-design-pro-cli 工具，之後只須要pro new就能夠直接構建這個項目了github

npm install ant-design-pro-cli -g //全局安裝腳手架
mkdir pro-demo && cd pro-demo    //在新目錄下
pro new                          //新建antd-pro
npm start   //運行項目
複製代碼

==這裏推薦第二種方法哦，這樣你在任什麼時候候均可以在本地構建你的antd-pro項目了==。npm

開始搭建

（1）打開命令行，輸入 npm install ant-design-pro-cli -g ，而後等待安裝完成json

（2）新建一個文件夾（目錄）,在該文件夾裏打開命令行，輸入：mkdir pro-demo && cd pro-demo，該命令會新建一個名爲pro-demo的文件夾，並進入該文件夾瀏覽器

（3）輸入pro new 命令，將會在該目錄下安裝你的antd-pro項目（輸入項目名稱，路徑默認爲當前）antd

（4）輸入npm start 命令

（5）啓動完成後會自動打開瀏覽器訪問 http://localhost:8000，你看到下面的頁面就表明成功了

三.目錄結構

ant-design-pro-cli已經爲咱們生成了一個完整的開發框架，提供了涵蓋中後臺開發的各種功能和坑位，下面是整個項目的目錄結構。

├── config                   # umi 配置，包含路由，構建等配置
├── mock                     # 本地模擬數據
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地靜態資源
│   ├── components           # 業務通用組件
│   ├── e2e                  # 集成測試用例
│   ├── layouts              # 通用佈局
│   ├── models               # 全局 dva model
│   ├── pages                # 業務頁面入口和經常使用模板
│   ├── services             # 後臺接口服務
│   ├── utils                # 工具庫
│   ├── locales              # 國際化資源
│   ├── global.less          # 全局樣式
│   └── global.ts            # 全局 JS
├── tests                    # 測試工具
├── README.md
└── package.json
複製代碼

四.添加本身的業務界面

咱們看到如今的antd-pro項目是一個空的框架，相信各位寶藏前端們必定想立馬看到本身的頁面出如今項目中吧，讓咱們立刻開始吧！

如今咱們將使用Visual Studio Code這款友好的編輯器來從新打開咱們的項目，以便進行開發工做。打開項目，控制檯輸入：那匹馬start：等待運行完成：

1.新建路由

路由：目前腳手架中全部的路由都經過 config.ts 來統一管理，在 umi 的配置中咱們增長了一些參數，如 name，icon，hideChildrenInMenu，authority，來輔助生成菜單。其中：

name 和 icon分別表明生成菜單項的文本和圖標。

hideChildrenInMenu 用於隱藏不須要在菜單中展現的子路由。用法能夠查看分步表單的配置。

hideInMenu 能夠在菜單中不展現這個路由，包括子路由。

authority 用來配置這個路由的權限，若是配置了將會驗證當前用戶的權限，並決定是否展現。

菜單：菜單根據 config.ts 生成。若是你的項目並不須要菜單，你能夠在 src/layouts/BasicLayout.tsx 中設置 menuRender={false}。

在config/config.ts(也多是js文件，取決你選擇的是TypeScript仍是javaScript) 文件中添加新的路由信息:

routes: [
        {
          path: '/',
          name: 'welcome',
          icon: 'smile',
          component: './Welcome',
        },
        {               //這個就是新添加的路由，它含有一個子頁面Page2
          path: '/test',
          name: 'test',
          icon: 'bars',
          routes: [{
            path: '/test/page2',
            name: 'MyTest',
            component: './Page2',
          }]
        },
        {
          component: './404',
        },
      ]
複製代碼

2. 新建頁面

在pages目錄下新建Page2.jsx

import React from 'react';

const MyPage = (props) => (
  <h2>個人頁面</h2>
);

export default MyPage;
複製代碼

保存看到頁面出現如下內容表示成功：

3.編寫 UI Component

隨着應用的發展，你會須要在多個頁面分享 UI 元素 (或在一個頁面使用屢次)，在 dva 裏你能夠把這部分抽成 component 。

咱們來編寫一個 MyTest component，準備來實現一個卡片展現頁面。

新建 components/MyTest/index.js 文件：

import React, { Component } from 'react';
import { Card } from 'antd';

const { Meta } = Card;

export default class MyTest extends Component {
    render() {
        return (
            <div style={{ padding: '0 24px', minHeight: 500, display: 'flex',margin:'auto',justifyContent:'center' }}>
             
                <Card
                    hoverable
                    style={{ width: 480, margin: 20 }}
                    cover={<img alt="example" src={require('./img/ship.jpg')} />}
                >
                    <Meta title="那時候我只會想本身想要什麼，從不想本身擁有什麼" description="生命就像一盒巧克力，結果每每出人意料" />
                </Card>
                <Card
                    hoverable
                    style={{ width: 480, margin: 20 }}
                    cover={<img alt="example2" src={require('./img/aa.jpg')} />}
                >
                    <Meta title="但願是一個好東西，也許是最好的，好東西是不會消亡的" description="那是一種內在的東西， 他們到達不了，也沒法觸及的" />
                </Card>
                <Card
                    hoverable
                    style={{ width: 480, margin: 20 }}
                    cover={<img alt="example3" src={require('./img/gg.jpg')} />}
                >
                    <Meta title="城鎮中有那麼多的酒館，她卻恰恰走進了個人酒館" description="生命就像一盒巧克力，結果每每出人意料" />
                </Card>
           
                
            </div>
        )
    }
}
複製代碼

4.修改頁面

咱們將剛纔的頁面修改成：

import React from 'react';
import Mytest from  '@/components/MyTest';

export default ()=>(
    <Mytest /> ) 複製代碼

保存運行咱們將會看見：

大功告成！

五.在antd-pro中使用圖表

如今有不少業務都會使用圖表類框架，在antd-pro中咱們也可使用這類框架來完成本身的功能。

G2：一套基於可視化編碼的圖形語法，以數據驅動，具備高度的易用性和擴展性，用戶無需關注各類繁瑣的實現細節，一條語句便可構建出各類各樣的可交互的統計圖表。

ECharts：一個使用 JavaScript 實現的開源可視化庫，能夠流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定製的數據可視化圖表。

咱們在這裏推薦使用ECharts，由於文檔比較詳細，社區人氣也比較高，資料會比較多。

1.新建路由

routes: [
        {
          path: '/',
          name: 'welcome',
          icon: 'smile',
          component: './Welcome',
        },
        {
          path: '/test',
          name: 'test',
          icon: 'bars',
          routes: [{
            path: '/test/page2',
            name: 'MyTest',
            component: './Page2',
          },
          {                //新建一個圖表頁面的路由 
            path: '/test/page1',
            name: 'MyChart',
            component: './Page1',
          }]
        },
        {
          component: './404',
        },
      ]
複製代碼

2. 新建頁面

import React from 'react';
import Pie from '@/components/Echart/Pie';  // @ 表示相對於源文件根目錄
import Map from '@/components/Echart/Map';
import Bar from '@/components/Echart/Bar';
export default () => (
  <div style={{ display: 'flex',justifyContent:'center' }}> <Bar/> <Pie /> <Map /> </div>
);
複製代碼

3.編寫 UI Component

咱們先來編寫一個 Bar component，用來構建柱狀圖。

新建 components/Echart/Bar.js 文件：

import React, { Component } from 'react';
// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
// 引入地圖相關
import  'echarts/lib/chart/bar';
// 引入提示框和標題組件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/title';
import 'echarts/lib/component/toolbox';

class Bar extends Component {
    componentDidMount() {
        // 基於準備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('mapBar'));
        // 繪製圖表
        myChart.setOption({
            backgroundColor: '#fff',
            legend: {},
            tooltip: {},
            dataset: {
                dimensions: ['product', '2015', '2016', '2017'],
                source: [
                    {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                    {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                    {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                    {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]});     
    }
    render() {
        return (
                <div id="mapBar" style={{height:550,width:520,marginRight:20}}></div>
        );
    }
}
export default Bar;
複製代碼

保存運行，咱們就能夠看見圖表出如今咱們新建的頁面上了。按照一樣的方法，咱們新建更多的圖表，能夠看到：

五.菜單設置

打開src\locales\zh-CN\menu.js文件，添加菜單信息：

'menu.test':'個人頁面',
  'menu.test.MyTest':'個人卡片',
  'menu.test.MyChart':'個人圖表',
複製代碼

能夠看到菜單已生效：

六.基礎樣式設置

可能咱們的寶藏前端們要問了，咱們看到的antd-pro項目的示例都是側邊欄，小怪鹿你這怎麼是頂部菜單?咱們來看：

打開config\defaultSettings.js，就能夠修改基礎樣式啦！

export default {
  navTheme: 'light',
  primaryColor: '#fff',
  layout: 'sidemenu',
  contentWidth: 'Fluid',
  fixedHeader: false,
  autoHideHeader: false,
  fixSiderbar: false,
  colorWeak: false,
  menu: {
    locale: true,
  },
  title: '小怪鹿前端',
  pwa: false,
  iconfontUrl: '',
};

複製代碼

七.結語

ant-design-pro做爲阿里力推的前端中後臺解決方案，已經被愈來愈多的開發人員使用，本章節介紹了快速在項目中構建本身的業務界面，還須要在 src/models，src/services 中創建相應的 model 和 service，而狀態管理以及請求數據將會在下一章節帶給你們，敬請期待哦！，但願各位寶藏前端們能夠好好練習一下章節內容，將本身的完整的頁面添加到框架中！！！

更多前端技術文章，盡在前端潮咖技術社區