ant-design-pro项目开发全攻略（用这个做博客网站模板不要太快，一招鲜吃遍天）

前言

• 打算做一个个人网站，新建umi项目的时候发现了ant-design-pro这个项目模板，打开一看貌似挺有用，记录一下一步步探索的开发攻略，包括如何修改主题内容、添加路由新页面，以及将md文档文件插入页面（用于博客网站制作）。

新建ant-design-pro项目

1. 先确保全局有yarn，全局安装umi依赖，另外可以使用国内源tyarn下载（后面文档中可以自行将yarn改成tyarn进行使用），加快速度。

   npm i yarn tyarn -g
   

   yarn global add umi
   

2. 新建项目并进入项目文件夹，创建项目。

   mkdir myapp && cd myapp
   

   yarn create umi
   

3. 选择项目时选择ant-design-pro。

   ? Select the boilerplate type (Use arrow keys)
   > ant-design-pro  - Create project with a layout-only ant-design-pro boilerplate, use together with umi block.
     app             - Create project with a simple boilerplate, support typescript.
     plugin          - Create a umi plugin.
   

4. 然后js和ts按喜好选择，我这边图省事选择js。

5. 最后选择complete。
   

6. 创建好之后下载依赖包。

   yarn install
   

7. 然后启动

   yarn start
   

   
   

目录结构

├── 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

国际化多语言

1. 登录页在src/user/login/index.jsx，我们点进去会发现，它配置了国际化的语言，利用的是umi封装的useIntl，formatMessage()里面传一个带id的对象即可。

   import {useIntl} from 'umi';
   ...
   const intl = useIntl();
   ...
   <LoginForm
          logo={<img alt="logo" src="/favicon.ico"/>}//可以修改你登录页展示的网站图标
          title='可以修改成你登录页展示的网站名'
          subTitle={intl.formatMessage({
            id: 'pages.layouts.userLayout.title',//Ant Design Pro
          })}
          initialValues={{
            autoLogin: true,
          }}
          ...
          onFinish={async (values) => {
            await handleSubmit(values);
          }}
   >
   

2. 这些语言，在国际化locales文件夹，默认显示的是中文的，也就是在locales/zh-CN，例如pages.layouts.userLayout.title在zh-CN的pages.js文件中，第一条就是。

   export default {
     'pages.layouts.userLayout.title': 'Ant Design 是西湖区最具影响力的 Web 设计规范',
     'pages.login.accountLogin.tab': '账户密码登录',
     'pages.login.accountLogin.errorMessage': '错误的用户名和密码(admin/ant.design)',
     'pages.login.failure': '登录失败，请重试！',
     ...
   }
   

3. 如果我们想要配置国际化，就在这里修改之后，将其他国语言的相应句子写在对应的文件夹文件中，umi的国际化配置了八种语言。
   

修改自己的网站个性化

图标

• 图标替换掉public文件夹中的favicon.ico文件即可。

网站名

• 网站名的话，浏览器导航默认显示的是Ant Design Pro，在config/defaultSettings.js文件，可以进行修改。
  
  

主题

• 修改主题同样也是修改defaultSettings.js文件，而且有一个可以自定义主题的网址：ant Design Pro 主题配置，只要将拷贝来的配置对象与原对象对比修改对应内容即可。
  

去除水印

• 注释掉/app.jsx中的水印句。
  

修改加载页

• 首页进入前的加载页，在document.ejs中修改。
  

路由

路由与导航关系

1. 项目默认自带了一个导航来显示路由，当然不同的主题中不一样，路由位置也可以在上边。
   

2. umi路由是约定式的，在pages文件夹中，文件路径就是路由，但是有人会提出疑问：那登录页明明也有路由，怎么不在导航中？，我们知道登录页肯定不应该作为导航的，这是可以配置的，在config/config.js中有一个routes对象，路由都在这里。
   

3. 我们可以看见不存在于导航的user的配置，layout属性设置为false，而存在于导航的dashboard没有设置这个，而是设置了name和icon。
   
   

4. 我们尝试把user的layout属性注释掉，并且也设置上name，再借用一下dashboard的图标，这下就出现在导航里了。（ps：登录页肯定还是不要出现在导航中比较好）
   
   

5. 这下我们也会添加路由了（去src编写对应文件夹，再编写路由配置），并且可以根据这个页面的作用，选择需不需要添加在导航中，路由配置全属性如下：

   • name:string 配置菜单的 name，如果配置了国际化，name 为国际化的 key。
   • icon:string 配置菜单的图标，默认使用 antd 的 icon 名，默认不适用二级菜单的 icon。
   • access:string 权限配置，需要预先配置权限
   • hideChildrenInMenu:true 用于隐藏不需要在菜单中展示的子路由。
   • hideInMenu:true 可以在菜单中不展示这个路由，包括子路由。
   • hideInBreadcrumb:true 可以在面包屑中不展示这个路由，包括子路由。
   • headerRender:false 当前路由不展示顶栏
   • footerRender:false 当前路由不展示页脚
   • menuRender: false 当前路由不展示菜单
   • menuHeaderRender: false 当前路由不展示菜单顶栏
   • flatMenu: ture 子项往上提，只是不展示父菜单

路由导航图标

• 路由图标修改可以就用Ant Design Icon，使用时不需要加上Outlined即可，比如以下图标，我们直接写Html5即可。（如果未显示出来可能是缓存问题，删除src下的.umi重新启动项目即可）
  
  
  

markdown

默认文档

1. 项目默认根据md文件生成了文档。
   
   
2. 除了根目录下的README.md，其他都是根据src文件夹下的md文件生成的，比如组件文档就指向components/index.md，我们可以试着在pages下写一个md文件，自动生成了对应的文档。
   
   
   

在页面中插入文档

1. 如果想写自己的个人博客网站，必不可少的页面中插入文档，这些项目都封装好了，我们只需要将md文件当作react组件引入。

2. 因为在src下创建md会被带去默认文档，因此我们可以选择在根目录创建一个mds文件夹保存md文件。
   
   

3. 比如我们将默认的dashboard的analysis页修引入文档展示用于测试。（修改pages/dashboard/analysis/index.jsx）

   ...
   
   import TestMd from '@/../mds/test.md'
   
   const Analysis = () => {
     ...
     return (
       <GridContent>
         <TestMd/>
       </GridContent>
     );
   };
   
   export default Analysis;
   

4. 效果
   

@映射路径无法快捷跳转问题

• 记录在了另一篇博客：react项目如何设置ctrl+鼠标左键跳转到路径带@隐射的对应文件。

尾言

如果觉得文章还不错的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~