react+antdpro+ts实现企业级项目一：项目安装及内置模块删除

从antdpro的安装、启动到删除不需要内置模块，使用typescrpt语言，完整实现项目。那么本项目默认适合已经懂了一些前端的基础知识，并且了解 umi 和 Ant Design的同学，当然在项目内会有使用的相关技术栈的详细介绍。

一、下载antdpro项目，并成功启动

# 使用 npm
npm i @ant-design/pro-cli -g
pro create antdproProgram
使用官方提供的pro-cli创建脚手架，选择umi4	

// 使用cnpm安装依赖
cnpm install

// 启动项目
npm run start

出现下面页面代表项目启动成功。

打开浏览器，输入 http://localhost:8000 可以看到以下页面说明项目启动成功！

**

二、项目目录结构

**
整个项目的目录如下，开发主要用到的目录有public、src文件夹。建议项目内所有路由组件以大驼峰命名打平到 pages 下面第一级，而对于多个页面可能会用到的组件推荐放到 src/components 中，对于只是被单个页面依赖的（区块）组件，推荐就近维护到路由组件文件夹下即可。

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

└── app.tsx

三、修改系统配置，删除不需要的内置组件

antdpro默认安装了很多不需要的内置组件，需要将其删除。

● 国际化
作为入门学习，而且在实际工作中很少用到国际化，需移除国际化，Ant Design Pro提供了命令可一次性移除所有国际化。

● 切换语言及问号
基础布局中右上角的切换语言和跳转链接也是不需要的，需要移除

在src/app.jsx文件中，有个layout导出，顾名思义就是基础布局，其中的actionsRender字段含义是配置自定义操作列表，将其改为空的数组即可。

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    // actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
   actionsRender: ()=>[],
    avatarProps: {
      src: initialState?.currentUser?.avatar,
      title: <AvatarName />,
      render: (_, avatarChildren) => {
        return <AvatarDropdown>{avatarChildren}</AvatarDropdown>;
      },
    },
  ...
  }
}

● 左侧菜单OpenAPI文档和业务组件文档
在src/app.jsx的layout导出代码，其中的links配置用于配置侧边菜单的底部链接，将对应的links赋值为空数组即可。

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    // actionsRender: () => [<Question key="doc" />, <SelectLang key="SelectLang" />],
    actionsRender: () => [],
    ......
    // links: isDev
    //   ? [
    //     <Link key="openapi" to="/umi/plugin/openapi" target="_blank">
    //   <LinkOutlined />
    //   <span>OpenAPI 文档</span>
    //   </Link>,
    //   ]
    //   : [],
    links:[]
  }
}

● 底部链接和版权声明
src/app.jsx的layout导出代码，启用的footerRender，自定义页脚footer的render方法，用于配置系统底部区域。直接删除配置即可。如果需要底部内容且需要修改成自己的文案，根据Footer组件的引用在src/components/Footer/index.jsx中找到F
ooter的代码，修改相应属性值即可。

export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
  return {
    actionsRender: () => [],
    ......
    // footerRender: () => <Footer />,
  }
}

const Footer: React.FC = () => {
  const intl = useIntl();
  const defaultMessage = intl.formatMessage({
    id: '风度不想说话',
    defaultMessage: '风度不想说话出品',
  });

  const currentYear = new Date().getFullYear();

  return (
    <DefaultFooter
      style={{
        background: 'none',
      }}
      copyright={`${currentYear} ${defaultMessage}`}
      links={[
        
      ]}
    />
  );
};

export default Footer;

最终实现的纯净版可用于后续开发的页面完整效果如下：