backstage使用笔记（1）- 项目的搭建和插件的创建

　　

　　backstage是一款基于react+ts的构建开发者门户的开放性平台，官网地址：https://backstage.io/。

　　推荐使用人群：熟悉react框架及ts语法的筒子们，不推荐使用人群：前端小白或新手。

　1.创建项目

　　  运行npx @backstage/create-app则可以在当前目录创建出一个backstage项目。

　　  项目包括前端和后台代码，跑项目时，需要同时启动前后端代码，前端启动命令：yarn start;后台启动命令：yarn workspace backend start

    2.创建插件

　　   运行yarn create-plugin

　　　　

 

 

 

 

运行成功后，项目目录中会出现一个plugins文件夹

　　　　　　　

 

 

 文件夹中放的是所有新建的插件（此处我建了三个插件）

 每个插件目录都如上，插件新建成功后，packages/app/src/plugins.ts里会自动引入新增插件

　　

 

在sidebar.tsx文件中添加新增插件，使页面左边栏可以显示该插件

 

 

 

 

 

 

 

 ps:backstage中使用了material-ui插件，所有icon，表格都可以从 material-ui中获取，或从backstage.storybook中拿，backstage.storybook是backstage自己封装的一个ui库，地址：https://backstage.io/storybook/?path=/story/plugins-examples--plugin-with-data。