Ant Design Pro 前端初始化

前端初始化(Ant Design Pro)

开始使用 - Ant Design Pro

npm i @ant-design/pro-cli -g
pro create user-fronted

选择 umi 的版本

? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯  umi@4
   umi@3

安装依赖：

yarn
// 或
npm install

yarn安装

安装 | Yarn - JavaScript 软件包管理器 | Yarn中文文档 - Yarn中文网 (yarnpkg.cn)

16版本以上

corepack enable

选择yarn

项目瘦身

项目运行成功后,执行git命令 然后瘦身，删错文件还可以还原

git init

git add .

git commit -m "first init"

国际化移除（i18n-remove）

运行 i18n-remove
报错

yarn run v1.22.19
$ pro i18n-remove --locale=zh-CN --write
C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\config-array-factory.js:784
            throw error;
            ^

Error: Failed to load config "prettier" to extend from.
Referenced from: BaseConfig
    at configInvalidError (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\config-array-factory.js:290:9)
    at ConfigArrayFactory._loadExtendedShareableConfig (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\config-array-factory.js:883:23)  
    at ConfigArrayFactory._loadExtends (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\config-array-factory.js:781:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\config-array-factory.js:720:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\config-array-factory.js:665:20)    
    at _normalizeObjectConfigData.next (<anonymous>)
    at ConfigArrayFactory.create (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\config-array-factory.js:460:16)
    at createBaseConfigArray (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\cascading-config-array-factory.js:98:48)
    at new CascadingConfigArrayFactory (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\cascading-config-array-factory.js:234:30) {      
  messageTemplate: 'extend-config-missing',
  messageData: { configName: 'prettier', importerName: '' }
}

Node.js v18.13.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

遇到报错不要慌，百度，开源项目去 issue

找到项目 git issue地址，搜关键词

https://github.com/ant-design/ant-design-pro/issues
根据搜关键词得到
https://github.com/ant-design/ant-design-pro/issues/10452
执行

yarn add eslint-config-prettier
yarn add eslint-plugin-unicorn

√ 📦  load all locale file and build ts
√ ✂️  format routes
- ✂️  remove locale for src/app.tsx.C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\shared\config-validator.js:175
                throw new Error(message);
                ^

Error: .eslintrc.js » C:\develop\user-fronted\node_modules\@umijs\lint\dist\config\eslint\index.js:
        Environment key "es2022" is unknown

    at C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\shared\config-validator.js:175:23
    at Array.forEach (<anonymous>)
    at ConfigValidator.validateEnvironment (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\shared\config-validator.js:169:34)
    at ConfigValidator.validateConfigArray (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\shared\config-validator.js:319:18)
    at CascadingConfigArrayFactory._finalizeConfigArray (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\cascading-config-array-factory.js
:493:23)
    at CascadingConfigArrayFactory.getConfigArrayForFile (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\@eslint\eslintrc\lib\cascading-config-array-factory.j
s:299:21)
    at CLIEngine.executeOnText (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\node_modules\eslint\lib\cli-engine\cli-engine.js:889:47)
    at eslintJS (C:\develop\user-fronted\node_modules\@ant-design\pro-cli\src\i18n\eslintJs.js:10:25)
    at C:\develop\user-fronted\node_modules\@ant-design\pro-cli\src\i18n\index.js:63:32
    at Array.forEach (<anonymous>)

Node.js v18.13.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit code 1

修改node_modules/@umijs/lint/dist/config/eslint/index.js文件注释
// es2022: true可以解决问题

然后发现菜单没了
现在官网好像修复了这个bug

router.ts

export default [
  {
    path: '/user',
    layout: false,
    routes: [{ name: '登录', path: '/user/login', component: './User/Login' }],
  },
  { path: '/welcome', name: '欢迎', icon: 'smile', component: './Welcome' },
  {
    path: '/admin',
    name: '管理页',
    icon: 'crown',
    access: 'canAdmin',
    routes: [
      { path: '/admin', redirect: '/admin/sub-page' },
      { path: '/admin/sub-page', name: '二级管理页', component: './Admin' },
    ],
  },
  { name: '查询表格', icon: 'table', path: '/list', component: './TableList' },
  { path: '/', redirect: '/welcome' },
  { path: '*', layout: false, component: './404' },
];

总结：

运行 i18n-remove 两个问题：
第一个：eslint的版本问题，可以尝试注释项目中.eslint.js的扩展部分跳过此错误。
第二个：会直接把默认的菜单配置移除掉,可以尝试在路由配置文件中加上name字段