用插件打造 Umi 项目专属布局，体验开发的乐趣

2023-12-01 13:24:32

使用 Umi 插件在 Umi 项目中添加默认布局

使用 Umi 插件的优势

在 Umi 项目中使用插件可以提供更好的开发体验，使开发人员能够轻松地添加功能和自定义应用程序。本文将重点介绍如何使用 Umi 插件为 Umi 项目添加默认页眉、页脚和全局布局。

安装 Umi 插件

使用以下命令安装 @umijs/plugin-layout 插件：

npm install @umijs/plugin-layout --save-dev

在 .umirc.ts 文件中添加插件配置：

export default {
  plugins: [
    ['@umijs/plugin-layout', {}],
  ],
};

创建默认布局

创建一个名为 layouts 的文件夹并放置在 src 目录中。
在 layouts 文件夹中，创建一个名为 Index.tsx 的文件并添加以下代码：

import React from 'react';

export default function Layout(props) {
  const { children } = props;
  return (
    <div>
      <header>
        <h1>Header</h1>
      </header>
      <main>
        {children}
      </main>
      <footer>
        <p>Footer</p>
      </footer>
    </div>
  );
}

在 App.tsx 中使用布局

在 src/app.tsx 文件中，导入布局并将其包裹在 App 组件中：

import React from 'react';
import Layout from './layouts/Index';

export default function App() {
  return (
    <Layout>
      <h1>Home</h1>
    </Layout>
  );
}

创建全局布局

在 .umirc.ts 文件中，将布局配置为全局：

export default {
  plugins: [
    ['@umijs/plugin-layout', {
      layout: 'src/layouts/GlobalLayout.tsx',
    }],
  ],
};

在 src 目录中，创建一个名为 GlobalLayout.tsx 的文件并添加以下代码：

import React from 'react';

export default function GlobalLayout(props) {
  const { children } = props;
  return (
    <div>
      <header>
        <h1>Global Header</h1>
      </header>
      <main>
        {children}
      </main>
      <footer>
        <p>Global Footer</p>
      </footer>
    </div>
  );
}