Strapi 3 Beta版：如何创建可在左侧菜单访问的自定义插件

我刚踩过Strapi 3.0.0 Beta插件开发的坑，官方文档确实没跟上更新节奏，折腾了好一阵才摸清楚正确的配置方式，给你一步步拆解：

1. 用CLI生成插件基础骨架 #

别手动建目录！直接用Strapi的命令行工具生成完整的插件结构，能避免很多配置错误：

strapi generate:plugin my-plugin

这个命令会在./plugins/my-plugin下自动生成后端+前端的基础框架，比自己从零搭靠谱多了。

2. 配置前端入口文件（关键！） #

Strapi 3 Beta对前端插件的加载逻辑做了大改，你需要确保./plugins/my-plugin/admin/src/index.js（没有就新建）的配置正确，这是插件被管理面板识别的核心：

import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import Initializer from './components/Initializer';
import MyPluginPage from './pages/MyPluginPage';

const plugin = {
  register(app) {
    // 核心：添加侧边栏菜单项
    app.addMenuLink({
      to: `/plugins/${pluginId}`,
      icon: 'plug', // 可以用Strapi内置图标，比如'folder' 'settings'等
      intlLabel: {
        id: `${pluginId}.plugin.name`,
        defaultMessage: pluginPkg.strapi.name, // 从package.json取插件名称
      },
      Component: MyPluginPage, // 点击后跳转的页面组件
      permissions: [
        // 配置访问权限，这里允许所有授权用户访问
        { action: `${pluginId}.access`, subject: null },
      ],
    });

    // 注册插件（初始化逻辑可选）
    app.registerPlugin({
      id: pluginId,
      initializer: Initializer,
      isReady: false,
      name: pluginPkg.strapi.name,
    });
  },
};

export default plugin;

3. 创建插件的页面组件 #

在./plugins/my-plugin/admin/src/pages下新建MyPluginPage.js，这是点击侧边栏链接后展示的内容：

import React from 'react';
import { Layout, Header } from '@strapi/design-system';

const MyPluginPage = () => {
  return (
    <Layout>
      <Header title="我的自定义插件" />
      <div style={{ padding: '2rem' }}>
        <p>这是Strapi 3 Beta自定义插件的测试页面！</p>
      </div>
    </Layout>
  );
};

export default MyPluginPage;

4. 配置插件权限（可选但推荐） #

如果需要控制哪些用户能访问插件，修改./plugins/my-plugin/config/permissions.js：

module.exports = {
  settings: {
    access: {
      enabled: true,
      description: '允许访问我的自定义插件',
      category: 'plugin',
      type: 'public',
    },
  },
};

5. 构建并启用插件 #

最后一步，构建插件前端代码并重启Strapi：

# 进入插件目录构建前端
cd ./plugins/my-plugin && npm run build
# 返回项目根目录重启Strapi服务
cd ../.. && strapi develop

注意：Strapi 3 Beta用了全新的UI组件库，和Alpha版本的组件写法差异很大，如果你需要复杂的UI，可以参考Strapi内置插件（比如Content Manager）的代码结构来调整。

现在你应该能在左侧侧边栏看到你的自定义插件了！

内容的提问来源于stack exchange，提问作者Abd0m1nals