简单配置umiJS学习笔记

素颜马尾好姑娘i 2022-05-13 13:06 226阅读 0赞

最近跟着[Antd-Pro官方教程][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"
      }
    };

[Antd-Pro]: https://www.yuque.com/ant-design/course
[Demo]: https://github.com/YooHoeh/umiJS-demo.git