开箱即用的企业级数据和业务管理中后台前端框架Ant Design Pro 5的开箱使用和偏好配置_oneapi

❯ umi@4

umi@3

如果选择了 umi@4 版本，暂时还不支持全量区块。

如果选择了 umi@3，还可以选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)

❯ simple

complete

安装依赖，直接install就行：

$ cd myapp && tyarn

// 或

$ cd myapp && npm install

目录认知

├── config # umi 配置，包含路由，构建等配置

├── mock # 本地模拟数据

├── public

│ └── favicon.png # Favicon

├── src

│ ├── assets # 本地静态资源

│ ├── components # 业务通用组件

│ ├── e2e # 集成测试用例

│ ├── layouts # 通用布局

│ ├── models # 全局 dva model

│ ├── pages # 业务页面入口和常用模板

│ ├── services # 后台接口服务

│ ├── utils # 工具库

│ ├── locales # 国际化资源

│ ├── global.less # 全局样式

│ └── global.ts # 全局 JS

├── tests # 测试工具

├── README.md

└── package.json

推荐的umi4简单框架便于二次开发的版本有几个文件是没有，的大家根据需求自己修改或创建。

项目启动

#直接start 或默认启动前端和模拟mock的接口 
npm start

#使用run dev则是进入实际开发模式，mock数据可以删掉了。当然得在自己已经熟悉各个不需要修改接口的数据内容，让自己开发的后端确实能返回自己想要的数据。一般情况下可以留下来做参考。
npm run dev

这里面还建议大家安装和配置prettier来对代码美化，挺省事了。

另外，习惯css-in-js的建议再安装styled-components，方便全局设置统一管理，也方便将布局与css分离，使界面简洁。

开发前设置

tsconfig.json文件推荐配置

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "sourceMap": true,
    "baseUrl": "./",
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@/*": ["./src/*","./public/*"],
      "@cpnt/*": ["./components/*"],
      "@@/*": ["./src/.umi/*"],
      "@@test/*": ["./src/.umi-test/*"]
    }
  },
  "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx", "./**/*.jsx", "./**/*.js","public/scripts/loading.js"],
  "exclude": ["mock"],
}

默认目录下还有jsconfig.json文件，实际上这里面有写配置是重复的，个人还是建议删掉jsconfig，统一从typescript形式，大家写代码的时候也尽量使用ts。上面配置中最重要的是jsx的类型，和allowJS，以及js文件的位置包含和排除设置

package.json文件

这个文件配置时不要在安装程序时操作，默认情况下会自动修改加入正在写入的模块信息，但有时候时间上会有差异，保存时可能造成覆盖而漏掉信息。

其他的启动项配置大家根据喜好修改，一般默认就行了。

主要配置config

直接在根目录下的config文件夹。

config.ts

添加自定义根路径，这个根据自己需求，多个网站需要路径转发的建议加一个自己识别：base

defaultSettings.ts文件：

这里面主要是修改标题名和logo，以及iconfont，如果觉得使用antd的图标就很好的话就不修改了，一般会修改成自己的：

oneapi.json，这个文件一般可以不用修改，自己根据需求配置吧。同样修改的title就行了。

proxy.ts，这个一般在开发阶段模拟接口时配置路径，基本不需要求改

route.ts

这个是修改的重点，一般自己确定开发一个组件是开始配置，同时在配置组件时一定要创建好对应组件，否则会出错，修改完保存即生效。默认结构，根据需要修改即可，照葫芦画瓢。

另外，如果只是想好菜单路径，没有开发实质，可以先不加component的参数。

自定义提示内容locals

ant design pro 封装和厉害，有很多东西都需要到指定的位置再去修改，一般到src目录下的locals去找，主要是中文，当然大家熟悉其他语言的也需要对应进行修改。

有很多共用的东西就不用修改了。

大家有国际化需求的要注意配置规则名称的定义，比如说pages表示页面，login表示login页面，后面就是元素或者对应比较明确的属性，这里面这个名称的定义，比如说pages.layouts.userLayout.title，这个在所有对应语言的文件中都要保持一致。

语言不会翻译的建议使用在线百度或者gpt都行吧，不用纠结。

至此基本上可以修改完成自己的自定义开箱了。建议大家边修改边调整设置。

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

本上可以修改完成自己的自定义开箱了。建议大家边修改边调整设置。

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-4im3f6xK-1714712090141)]

[外链图片转存中…(img-3bMKqMLU-1714712090142)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】