用react的antd框架搭建基本布局

最新推荐文章于 2024-08-20 15:53:53 发布

sinat_39416656

最新推荐文章于 2024-08-20 15:53:53 发布

阅读量835

点赞数

文章标签： react

本文链接：https://blog.csdn.net/sinat_39416656/article/details/118498439

版权

这篇博客详细记录了如何使用React和Antd库创建一个基本的后台布局。首先，通过yarn命令创建并初始化项目，然后设置路由和编写布局组件。在布局中使用了Antd的Header, Footer, Sider和Content组件。接着，创建全局css文件调整根元素高度，并在index.tsx中引入样式。最后，展示了浏览器中完成的后台布局效果。

摘要由CSDN通过智能技术生成

1.创建项目文件夹，并安装react-typecript项目,命令如下

mkdir react-antd

cd react-antd

yarn create @umijs/umi-app 如果创建失败可以用 cnpm create @umijs/umi-app 命令

yarn 如果用cnpm安装 cnpm install

2.运行antd项目，命令 npm start

在浏览器输入 http://localhost:8000 显示如下，即安装成功

3.用vs code编辑器打开项目，初始化项目目录如下

4.编写基本布局，创建layouts目录，新建index.tsx和index.less文件，配置路由文件

mkdir layouts

cd layouts

mkdir index.tsx

mkdir index.less

项目/src/layouts/index.tsx代码段如下

import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;

export default function layout(props: any) {
  return (
    <>
      <Layout>
        <Sider>Sider</Sider>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    </>
  );
}

项目/.umirc.ts代码段如下

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      exact: false,
      path: '/',
      component: '@/layouts/index',
      routes: [
        {
          exact: true,
          path: '/',
          component: '@/layouts/index',
        },
      ],
    },
  ],
  fastRefresh: {},
});

编写文件如上两图，浏览器显示效果如下

4.在项目/src目录里创建global.css全局css文件，将#root的高度改为100%，代码如下

#root {
    height: 100%;
}

5.编写项目/src/layouts/index.tsx文件如下

import { Layout } from 'antd';
import './index.less'

const { Header, Footer, Sider, Content } = Layout;

export default function layout(props: any) {
  return (
    <>
      <Layout className="layout-main">
        <Sider>Sider</Sider>
        <Layout>
          <Header>Header</Header>
          <Content>Content</Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    </>
  );
}

引入index.less文件，在最外层Layout组件添加类layout-main

index.less编写如下