如何自定义库

操作场景

以某组件中需要使用Vue（系统预置库）以及MintUI（自定义库）为例，介绍如何上传自定义库并如何在组件中使用库。

操作步骤

将自定义库的相关文件打成Zip包。

例如，在MintUI官网下载组件库的代码，增加一个packageinfo.json元数据描述文件，在该文件中列出Library包含的js和css文件名，并打成Zip包。该场景中Zip包为“MintUI.zip”，单击链接获取该包。

图1 MintUI库文件结构

packageinfo.json包含所要引入的文件。例如，MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件，请在packageinfo.json中添加这两个文件的描述，如下所示。其中，“js”和“css”定义文件类型，“name”定义文件路径及名称。
```
{
    "js": [
        {
            "name": "js/index"
        }
    ],
    "css": [
        {
            "name": "css/index"
        }
    ]
}
```
上传自定义库。
1. 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
2. 在主菜单中，选中“我的资产”。
3. 在左侧导航栏中，选择“我的库”，单击“添加库”。
4. 单击，选择待上传的库，并设置库的基本信息。
  图2 上传自定义库
  - 库名字：库的名称。
  - 操作类型：当前操作的类型，如新增、更新等。
  - 库ID：上传库的ID，由字母及数字组成，且必须以字母开头。
  - 版本说明：发布描述信息。

在组件中引用库。

以自定义组件（widget_demo_mintui）为例，在该组件中引用第三方库，单击widget_demo_mintui.zip获取该组件包。

在组件Widget包（widget_demo_mintui.zip）的“packageinfo.json”文件中增加requires节点，指定需要依赖库的库ID和版本号。
其中，“name”为库ID、“version”为库版本号数字部分。

例如，增加如下requires节点，库文件名称和版本号在库详情页面获取。
```
"requires": [{
      "name": "global_Vue",
      "version": "100.7"
    },
    {
      "name": "ttenant1***3596957a5bc_MintUI",
      "version": "1.0.0"
    }
  ]
```
在“requires”里增加库文件时，需要注意某些库文件之间有依赖关系，增加库文件需要有先后顺序，例如“global_VueI18n”是基于“global_Vue”的，需要写在“global_Vue”之后。

在Widget包（widget_demo_mintui.zip）的widget_demo_mintui.ftl中写一个简单的表单DOM。

<div id="widget_demo_mintui">
  <mt-field label="username" placeholder="Input username" v-model="username"></mt-field>
  <mt-field label="email" placeholder="Input email" type="email" v-model="email"></mt-field>
  <mt-field label="password" placeholder="Input password" type="password" v-modal="password"></mt-field>
  <mt-button type="primary" @click="submit">Register</mt-button>
</div>

在Widget包（widget_demo_mintui.zip）的widget_demo_mintui.js的render方法中新增Vue实例。

            Vue.use(MINT);
            var vm = new Vue({
                el: $("#widget_demo_mintui", elem)[0],
                data:{
                    username: "",
                    email: "",
                    password: ""
                },
                methods:{
                    submit: function(){
                        console.log(this.username + " registers");
                    }
                }
            })

将修改后的组件Widget包，重新打包。

返回AstroCanvas界面，选择“我的资产 > 我的组件”，单击“添加组件”，将3.d中的组件包上传至组件库中。

图3 上传组件
- 组件名称：组件名称，系统会根据组件包名称自动填充。
- 操作类型：当前操作的类型，如新增、更新等。
- 组件ID：资产ID，前缀不可编辑，上传组件包后会自动填写。
- 目录名称：组件的存放目录。
- 场景：该组件包的应用场景。勾选后，在相应类型页面开发中，才可使用该组件。
- 版本说明：组件的描述信息。
在大屏页面中拖入该组件，预览组件效果。

进入AstroCanvas界面，从大屏开发页面的“全部组件 > 自定义组件 > 其它”中，拖入widgetdemomintui组件到设计区域，调整组件大小，单击，预览效果。

图4 拖入自定义组件