
# 管理库
华为云Astro轻应用支持用户通过引用第三方库的方式，在降低组件开发复杂度的同时丰富组件的功能。因此，库是支撑高级页面组件运行的第三方依赖。若缺少相应的库，则页面组件不能正常运行。在华为云Astro轻应用环境配置中，可管理当前环境中该账号下的库资产。
#### 查看库详情
1. 在华为云Astro轻应用服务控制台，单击"进入首页"，进入应用开发页面。
2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001917373754.png)，选择"环境管理 \> 环境配置"，进入环境配置。
3. 在顶部主菜单中，选择"维护"。
4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 库"，可查看到当前环境该账号下所有的库资产。 
   - 系统预置库：华为云Astro轻应用已定义好的库，可直接加载并使用。在"全局"页签中，可查看所有预置的库。
   
   - 自定义库：当系统预置库无法满足用户需求时，用户可自定义库包进行上传，并加载到页面中进行使用。在"租户"页面下可查看所有自定义库。
   
   
   
   
5. 单击具体的库，进入库详情页，可查看该库的详细信息。
 
#### 下载库
1. 在华为云Astro轻应用服务控制台，单击"进入首页"，进入应用开发页面。
2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001917373754.png)，选择"环境管理 \> 环境配置"，进入环境配置。
3. 在顶部主菜单中，选择"维护"。
4. 在左侧导航栏中，选择"全局元素\> 页面资产管理 \> 库"。
5. 在库列表中，单击对应的库，进入库详情页面。
6. 在库详情页单击"下载"，即可下载库到本地。 
   您也可以在"更改历史"页签中，查看该库的历史版本（按照版本依次排序显示，最近版本号在最上面），选择不同版本的库进行下载。
   
   
 
#### 禁用库
1. 在华为云Astro轻应用服务控制台，单击"进入首页"，进入应用开发页面。
2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001917373754.png)，选择"环境管理 \> 环境配置"，进入环境配置。
3. 在顶部主菜单中，选择"维护"。
4. 在左侧导航栏中，选择"全局元素\> 页面资产管理 \> 库"。
5. 在库列表中，单击对应的库，进入库详情页面。
6. 单击页面右上角的![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001894140560.gif)，锁定库。
7. 库锁定后，单击"禁用"，在弹出的对话框中单击"确定"，即可禁用无用的库。 
   当库未受保护时，"禁用"按钮才会显示。系统预置的库不可编辑和禁用，只可下载。
   库禁用后，在"全局元素 \> 页面资产管理 \> 禁用资产"中，可查看已禁用的库。库禁用后，在库详情页面，单击"删除"，输入待删除库的名称，单击"确定"，即可删除该库。若需解除禁用，可单击"启用"，在弹出的对话框中单击"确定"，即可重新启用该库。
   
   
 
#### 自定义并上传新库
以某组件中需要使用Vue（系统预置库）以及MintUI（自定义库）为例，介绍如何上传自定义库并如何在组件中使用库。
1. 将自定义库的相关文件打成Zip包。
   
   例如，在MintUI官网下载组件库的代码，增加一个packageinfo.json元数据描述文件，在该文件中列出Library包含的js和css文件名，并打成Zip包，如[图1]。您也可以直接单击[MintUI.zip](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/MintUI.zip)，下载MintUI.zip包。
   图1MintUI库文件结构   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002009874921.png "点击放大")
   packageinfo.json包含所要引入的文件。例如，MintUI库需要引入的文件有"js/index.js"和"css/index.css"文件，请在packageinfo.json中添加这两个文件的描述，如下所示。其中，"js"和"css"定义文件类型，"name"定义文件路径及名称。
   ```
   {
       "js": [
           {
               "name": "js/index"
           }
       ],
       "css": [
           {
               "name": "css/index"
           }
       ]
   }
   ```
   
   
2. 上传自定义库。 
   1. 在华为云Astro轻应用服务控制台的实例列表中，单击低代码应用开发实例中的"进入控制台"，进入华为云Astro轻应用应用开发页面。
   
   2. 在页面左上方单击![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000002009756317.png)，选择"环境管理 \> 环境配置"，进入环境配置。
   
   3. 在顶部主菜单中，选择"维护"。
   
   4. 在左侧导航栏中，选择"全局元素\> 页面资产管理 \> 库"，单击"提交新库"。
   
   5. 输入库基本信息，单击"上传"，选择[1]中的zip包，单击"提交"。
      图2提交新库   
      ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001973394946.png "点击放大")
      表1上传库参数说明 
      | 参数    | 说明                                                                                                 |
      |:---|:---|
      | 名字    | 新上传库的名称。                                                                                           |
      | 上传图标  | 库的显示图标。                                                                                            |
      | 上传源文件 | 库文件包，单击"上传"，选择[1]中的MintUI.zip包。 |
      | 库ID   | 上传库的ID，由字母及数字组成，且必须以字母开头。                                                                          |
      | 分类    | 库所属的分类，直接在下拉框中选择。                                                                                  |
      | 库类型   | 上传库所属的类型，当前均为主题库。                                                                                  |
      | 发行说明  | 库的描述信息，可以设置为库的功能。                                                                                  |
         
      
   
   
   
   
3. 在组件中引用库。
   
   1. 在[1]中获取的组件Widget包（widget_demo_mintui.zip）的"packageinfo.json"文件中增加requires节点，指定需要依赖库的库ID和版本号。
      其中，"name"为库ID、"version"为库版本号数字部分。
      例如，增加如下requires节点，库文件名称和版本号在库详情页面获取。
      ```
      "requires": [{
            "name": "global_Vue",
            "version": "100.7"
          },
          {
            "name": "t0000000000qwwjxspaox_MintUI",
            "version": "1.0.0"
          }
        ]
      ```
      **在"requires"里增加库文件时，需要注意某些库文件之间有依赖关系，增加库文件需要有先后顺序，例如"global_VueI18n"是基于"global_Vue"的，需要写在"global_Vue"之后。**
      
   
   2. 在[1]中获取的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-model="password"></mt-field>
        <mt-button type="primary" @click="submit">Register</mt-button>
      </div>
      ```
      
   
   3. 在[1]中获取的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");
                          }
                      }
                  })
      ```
      
   
   4. 将修改后的组件Widget包，重新打包。
   
   
   
   
4. 返回华为云Astro轻应用环境配置，选择"维护 \> 全局元素 \> 页面资产管理 \> 组件"，单击"提交新组件"，将[3]中的组件包上传至组件库中。
   
   图3上传组件   
   ![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001973235186.png "点击放大")
   表2上传组件参数说明 
   | 参数    | 说明                                                                                                      |
   |:---|:---|
   | 名字    | 组件名称，系统会根据组件包名称自动填充。                                                                                    |
   | 上传图标  | 组件的显示图标，本示例不配置。                                                                                         |
   | 上传源文件 | 组件源文件包，即[3]中的widget_demo_mintui.zip包。 |
   | 组件ID  | 资产ID，前缀不可编辑，上传组件包后会自动填写。                                                                                |
   | 分类    | 组件所属分类，上传组件后，该组件将会在页面的该分类下进行展示。                                                                         |
   | 领域    | 组件包应用的领域。 一般保持默认"通用"，在组件列表中可基于领域进行分类展示。  |
   | 场景    | 该组件包的应用场景。勾选后，在相应类型页面开发中，才可使用该组件。                                                                       |
   | 发行说明  | 组件的描述信息，可以设置为组件的功能。                                                                                     |
      
   
   
 
