！！！暂时咕咕咕了

创建项目

  • 新建React项目

  • 使用Andt UI（前端框架）

    https://ant.design/components/overview-cn/

    1
    2
    3
    cnpm install antd --save
    # 或
    tyarn add antd
    1
    2
    3
    4
    // 引入样式for js
    import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
    // 引入样式for css
    @import '~antd/dist/antd.css';
    1
    import {组件} from 'antd'

  • 添加Echarts库（js可视化图表库）

    https://echarts.apache.org/examples/zh/index.html

    1
    2
    3
    cnpm install echarts --save
    # 或
    tyarn add echarts

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    import React from "react";
    import * as echarts from 'echarts';

    class EchartsTest extends React.Component {
        componentDidMount() {
            // 基于准备好的dom，初始化echarts实例
            const main: HTMLElement = document.getElementById('main') as HTMLElement;
            const myChart = echarts.init(main);
            // 绘制图表
            myChart.setOption({
                title: {text: 'ECharts 入门示例'},
                tooltip: {},
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            });
        }

        render() {
            return <div id="main" style={{width: 400, height: 400}}></div>
        }
    }

    export default EchartsTest;

  • 使用React Router

    http://react-guide.github.io/react-router-cn/index.html

    1
    2
    3
    4
    5
    6
    cnpm install react-router-dom --save
    # 或
    tyarn add react-router-dom
    # 对于TS
    tyarn add react-router-dom
    tyarn add @types/react-router-dom

    示例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // routers.tsx
    import {BrowserRouter as Router, Route, Switch} from "react-router-dom";
    import App from "../pages/Index";
    import Test from "../pages/Test";
    import React from "react";

    const routers = (
        <Router>
            <Switch>
                <Route path="/Index" component={Index}/>
                <Route path="/test" component={Test}/>
            </Switch>
        </Router>
    )
    export default routers;
    // index.tsx
    ReactDOM.render(
        <React.StrictMode>
            {routers}
        </React.StrictMode>,
        document.getElementById('root')
    );

    Ex：创建ant design pro示例

  • 安装tyarn

    1
    cnpm install yarn tyarn -g

  • 创建空项目

    1
    2
    3
    tyarn create umi <项目名>
    # 选择 ant design pro 或其他
    # 选择 v5 或其他

  • 安装依赖

    1
    cd <项目名> && tyarn

  • 运行项目

    1
    yarn start