4.创建一个插件面板

一般创建一个插件，都是想要扩展一些编辑器功能方便开发的，如果有能与之交互的可视化面板那是可以提升相当大的效率。
实际上在创建插件时，除了空模版，其他3个模版都是自带面板的。
这里可以直接通过带面板的模版创建插件。
这里以HTML 面板作为示例：

创建后，cd到插件根目录，安装依赖并编译。
然后刷新并开启first-panel插件。
启用并刷新扩展后，可以在 面板（Panel） 菜单中找到如下图所示的菜单项：

点击“默认面板”，就可以弹出插件自带的面板

而且该模版还在 开发者（Developer） 菜单中定义了另一个用于通信的菜单项

点击上图中红色方框所示的 发送消息给面板（Send message to Default Panel） 按钮后，可以看到面板上显示的内容会发生改变。

面板目录

打开插件目录

如图，相比之前空模版创建的插件，多出了 static 和 panels目录

• static目录
  
  static存放了面板的布局文件，如 css\html 等
• panel目录
  panel目录下有一个index.ts，这也是面板的入口源文件。
  而panel目录主要就是用于存放面板相关的源代码，每一个面板有一个 index.ts 入口源文件
• 描述文件 package.json
  打开插件的描述文件 package.json
  
  可以看到，多了一个panels字段。插件是否能正常显示面板就取决于该字段的配置。
  • panels：{} - 本扩展中定义的面板
    • default：String - 定义了一个名为 default 的面板
    • title：String - 面板标题
    • type：String - 面板类型
    • main：String - 面板源码目录
    • size：{} - 面板大小信息
      • min-width：Number - 最小宽度
      • min-height：Number - 最小高度
      • width：Number - 面板默认宽度
      • height：Number - 面板默认高度
        这里只介绍创建一个面板插件的示例，更多的关于面板的样式、功能、交互等后面补充。