最近跟着Antd-Pro官方教程学习umi，这里给大家推荐一下这个教程，特别适合初学者学习，教程涉及了AntD，AntD-Pro,umiJS,dvaJS等框架知识。

---

学习过程中跟着教程做了个Demo，下面贴出主要代码

export default {

  // 用来表示项目文件夹（page，model等）是否为单数，默认为复数

  singular: true,

  // 选择插件，这里是一个数组，一个插件是一个项，当项需要有别的参数的时候，这个项为一个数组，且这个数组第二个项是参数。

  plugins: [

    [

      // 开启umi集成的antd和dva，注意umi-plugin-react需要单独用npm i --save umi-plugin-react下载

      "umi-plugin-react",

      {

        antd: true,

        dva: true

        //

      }

    ]

  ],

  // 这里配置路由信息，需要注意这里是一个数组

  routes: [

    {

      path: "/",

      component: "../layout",

      routes: [

        {

          path: "/",

          component: "Helloworld"

        },

        {

          path: "helloworld",

          component: "Helloworld"

        },

        {

          path: "puzzlecards",

          component: "./puzzlecards"

        },

        {

          path: "list",

          component: "./list"

        },

        {

          path: "/dashboard",

          routes: [

            {

              path: "/dashboard/analysis",

              component: "Dashboard/Analysis"

            },

            {

              path: "/dashboard/monitor",

              component: "Dashboard/Monitor"

            },

            {

              path: "/dashboard/workplace",

              component: "Dashboard/Workplace"

            }

          ]

        }

      ]

    }

  ],

  // 这里配置代理，下面的意思是当api请求有/dev时会自动设置到目标链接，主要用于解决跨域问题。

  proxy: {

    "/dev": {

      target: "https://08ad1pao69.execute-api.us-east-1.amazonaws.com",

      changeOrigin: true

    }

  },

  // 在这里设置antd的主题相关配置，想要知道 antd 都定义了哪些变量，可以参考这里https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

  theme: {

    "@primary-color": "#30b767"

  }

};