AntDesign(React)學習-14 使用UMI提供的antd模板

1、UMI提供了可視化antd模板，可以直接添加到項目中修改用

比如將個人中心添加到項目中

2、選擇個人中心，確定

 

 3、成功

 

 4、打開項目

 

5、Route文件也自動添加

根路由有exact:true后面要把工作台移到mainfrm路由中

 6、運行報錯

 

 

7、安裝

 

 8、找不到style.less

 

安裝less模塊
npm install --save-dev less-loader less

 

 type.d.ts增加

declare module '*.css';

declare module "*.png";

declare module '*.less';

9、非umi React啟用less方法，需要修改webpack文件，網上類似文章很多，自己查看。

 

10、修改路由到如下位置

 

 11、運行

 12、有些模塊需要開啟國際化

cnpm install umi-plugin-react --save-dev

開啟國際化，如果安裝umi-plugin-react這里開啟國際化沒有反應，直接增加locale

 plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: true,
        dynamicImport: false,
        title: 'jgdemo',
        dll: true,
        locale: {
          enable: true, // default false
          default: 'zh-CN', // default zh-CN
          baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
        },
        routes: {
          exclude: [
            /models\//,
            /services\//,
            /model\.(t|j)sx?$/,
            /service\.(t|j)sx?$/,
            /components\//,
          ],
        },
      },
    ],

13、發現還是不行，關閉從新打開項目，可以添加了