UmiJS初探（二）

小知识，大挑战！本文正在参与“   程序员必备小知识   ”创作活动

UmiJS初探（一） 简单介绍了 umi的安装

Ant Design Pro为我们提供了丰富的模板组件 ProComponents

什么是ProComponents

官网介绍：

ProComponents 是基于 Ant Design 而开发的模板组件，提供了更高级别的抽象支持，开箱即用。可以显著的提升制作 CRUD 页面的效率，更加专注于页面。

• ProLayout 解决布局的问题，提供开箱即用的菜单和面包屑功能
• ProTable 表格模板组件，抽象网络请求和表格格式化
• ProForm 表单模板组件，预设常见布局和行为
• ProCard 提供卡片切分以及栅格布局能力
• ProDescriptions 定义列表模板组件，ProTable 的配套组件
• ProSkeleton 页面级别的骨架屏

ProComponents 安装

ProComponents 每一个组件都是一个独立的包，安装对应的包就可以使用

npm i @ant-design/pro-form --save
npm i @ant-design/pro-layout --save
npm i @ant-design/pro-table --save
npm i @ant-design/pro-list --save
npm i @ant-design/pro-descriptions --save
npm i @ant-design/pro-card --save
npm i @ant-design/pro-skeleton --save

我们这里先使用pro-layout 来构建我们的页面框架

npm i @ant-design/pro-layout --save

配置pro-layout 到Umi

在项目目录下 .umi.ts 文件 中添加 layout: {},

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {},  //在这个地方添加 layout: {}, 
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
});

刷新页面，我们看到

至此，我们成功在项目中引入pro-layout