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

官方提供了 pro-cli 来快速的初始化脚手架。所以就像nextjs之类的一样，直接创建项目就行，myapp是自己指定的项目名称，后面会在当前目录下创建一个myapp的目录，里面装了基本的配置信息文件。

# 使用 npm

npm i @ant-design/pro-cli -g

pro create myapp

运行中，会让选择 umi 的版本，一般推荐选择umi4框架版，如果想看完整架构建议到官网去看吧

[分析页 - Ant Design Pro]( )

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

❯ 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的参数。