ant design pro 构建react项目遇到的那些小事儿

ant-design-pro，企业级中后台前端/设计解决方案

启动

1、yarn create umi
2、选择ant-design-pro，javascript

3、npm install
4、npm start
5、项目启动成功

---

配置

1、删除国际化多语言环境：npm run i18n-remove
2、添加区块npx umi block add ListTableList --path=/list/table-list --js
（1）如果用的是javascript，而不是typeScript，记得后面加参数–js
3、顶部导航栏右侧，在src/components/GlobalHeader/RightContent.js中修改
eg：把右侧地球图标去除（多语言）

4、如果要在项目中引入全局的scss变量，
（1）package.json，安装node-sass,sass-loader

  "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",

（2）config/config.js中,将node_modules/@chint/parkball/src/styles/_theme.scss中的全局变量全部引入

  sass: {
    // implementation, sassOptions, prependData, sourceMap, webpackImporter
    prependData: '@import "node_modules/@chint/parkball/src/styles/_theme.scss";',
  }

---

terminal报错

1、报错：You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file
原因：@ichint/morphling中需要babel编译，而umi中没有将其设置成需要babel编译
（1）解决：config.js中加入

extraBabelIncludes: [
    path.join(__dirname, '../node_modules/@chint'),
  ],

（2）错误的解决方法：plugin.config.js中加上。
这样会覆盖原有umi中的babel设置

 config.module
    .rule('js')
    .test(/\.(js|jsx|es6)$/)
    .include.add([
    path.resolve(__dirname, 'node_modules/@terminus'),
    path.resolve(__dirname, 'node_modules/@ichint/morphling'),
  ])
    .end()
    .use('babel-loader')
    .options({
      presets: ['@babel/preset-env', '@babel/preset-react'],
      plugins: [
        ['@babel/plugin-proposal-class-properties', { "loose": true }],
        ['import', {
          libraryName: 'antd',
          style: true,
        }],
      ],
    })

2、报错：Plugin/Preset files are not allowed to export objects, only functions. In /Users/yquanmei/git/e-commerce-analysis/node_modules/babel-preset-es2015/lib/index.js
解决：（1）babel改成最新版本
①当前项目下执行npx babel-upgrade --write

3、报错：React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.
原因：export default导出的是一个对象，export 可以导出多个对象
解决：（1）如果用babel-plugin-add-module-exports插件可以解决这个问题，如果不用这个插件，export default的东西不用{} 引入。

---

一、从服务器获取菜单：https://blog.csdn.net/aSuncat/article/details/102701978