扩展 Inspector

    扩展的步骤如下：

    1. 在 Component 中注明自定义 Inspector 的入口文件
    2. 创建自定义 Inspector 的扩展包

    首先我们需要定义一份 Component 脚本，并且为这个脚本注明使用自定义 Inspector，方法如下：

    注意1: 这里我们定义了一个 字段，并在该字段中定义了 inspector 入口文件。

    注意2: 在 inspector 中我们采用 packages:// 协议定义入口文件路径。在 Cocos Creator
    中会对 packages:// 协议做特殊处理，会将 packages:// 协议后面的分路径名当做扩展包名字进行搜索，
    并根据搜索结果将整个协议替换成扩展包的路径做后续搜索。

    注意，在创建完扩展包后，你需要重启一下 Cocos Creator 以便让他正确读入该扩展包。

    接下来我们就可以在 foobar 包中定义 inspector.js：

    1. Vue.component('foobar-inspector', {
    2.   template: `
    3.     <ui-prop v-prop="target.foo"></ui-prop>
    4.     <ui-prop v-prop="target.bar"></ui-prop>
    5.   `,
    7.   props: {
    9.       type: Object,
    10.     },
    11.   },
    12. });

    Cocos Creator 的 Inspector 扩展使用了 Vue。这里我们通过定义一份 Vue
    的组件，并在组件中定义 props，使得其包含 target 数据来完成整个 Inspector 的数据定义。

    该 target 就是我们的 Foobar Class 在 Inspector 中对应的实例。

    这么做的目的是为了让 Inspector 可以更好的获得数据可视化的各方面信息。例如当你定义了 cc.Class 的属性为：

    这个时候在 Inspector 中的 target 里反应出的信息为 为 ‘Foo’，target.foo.attrs.readonly 为 true。
    这些信息有助于帮助你创建多变的界面组合。

    由于这些信息非常繁琐，Cocos Creator 也对 Vue 的 directive 做了一定的扩展。目前我们扩展了 v-prop，v-value
    v-readonly 和 v-disable。

    当你还是想利用 Cocos Creator 的默认方案显示数据段时，你可以使用 v-prop 配合 <ui-prop> 控件做绑定，如：

    1. <ui-prop v-prop="target.foo"></ui-prop>

    当你想对控件应用 readonly 或者 disable 行为时，请使用 v-readonly 和 v-disable。如：

    1. <ui-button v-readonly="target.foo.attrs.readonly">Foo</ui-button>