简单配置umiJS学习笔记

最近跟着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"
  }
};

你可能感兴趣的:(React,webpack)