# 使用华为云Astro轻应用开发高级页面时如何引用第三方库
#### 期望实现效果
在自定义高级页面组件开发过程中，华为云Astro轻应用支持开发者直接引用第三方库，在降低组件开发复杂度的同时，丰富了组件的功能。库是支撑高级页面组件运行的第三方依赖，如果缺少相应的库，则高级页面组件不能正常运行。华为云Astro轻应用提供了一些系统预置库，可在高级页面组件中直接引用或在页面设置中直接进行加载并使用。当系统预置的库无法满足需求时，可以上传自定义库，并加载到页面中使用。以某组件中需要使用Vue（系统预置库）以及MintUI（自定义库）为例，介绍如何上传自定义库，并在组件中使用库，最终实现效果如[图1]所示。
图1引入库后效果   
![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001971552045.png)
#### 功能实现方法
1. 将自定义库的相关文件打成Zip包。
   
   例如，在MintUI官网下载组件库的代码，增加一个packageinfo.json元数据描述文件，在该文件中列出Library包含的js和css文件名，并打成Zip包，如[图2]。您也可以单击[链接](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/MintUI.zip)，获取该包。
   图2MintUI库文件结构   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001913339480.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轻应用服务控制台的主页中，单击"进入首页"，进入应用开发页面。
   
   2. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001920616156.png)，选择"环境管理 \> 环境配置"，进入环境配置。
   
   3. 在主菜单中，选择"维护"。
   
   4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 库"。
   
   5. 单击"提交新库"，进入提交新库页面。
   
   6. 设置库的基本信息，上传[1]中的zip包后，单击"提交"。
      图3上传库   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001992415545.png "点击放大")
      表1新建MintUI库参数说明 
      | 参数    | 说明                                                                   | 示例                                                      |
      |:---|:---|:---|
      | 名字    | 新建库的名称。 取值范围：1\~80个字符。 | MintUI                                                  |
      | 上传源文件 | 选择自定义库的压缩包。                                                          | 选择[1]中的库 |
      | 库ID   | 上传库的ID，由字母及数字组成，且必须以字母开头。                                            | MintUI                                                  |
      | 发行说明  | 自定义库的描述信息，按需进行设置。                                                    | 自定义库                                                    |
         
      
   
   
   
   
3. 在高级页面组件中，引用库。 
   以自定义组件（widget_demo_mintui）为例，在该组件引用第三方库。
   1. 在组件包的"packageinfo.json"文件中，增加requires节点，指定需要依赖库的库ID和版本号。 其中，"name"为库ID、"version"为库版本号数字部分。
      例如，增加如下requires节点，库文件名称和版本号在库详情页面获取。
      ```
      "requires": [
          {
            "name": "global_Vue",
            "version": "100.7"
          },
          {
            "name": "t0000000000fcsfrfcaks_MintUI",
            "version": "1.0.0"
          }
        ]
      ```
      **在"requires"里增加库文件时，需要注意某些库文件之间有依赖关系，增加库文件需要有先后顺序，例如"global_VueI18n"是基于"global_Vue"的，需要写在"global_Vue"之后。**
      
   
   2. 在高级页面组件包的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. 在高级页面组件包的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_demo_mintui.zip](https://obs-for-bj4-gongyouyun-update.obs.cn-north-4.myhuaweicloud.com/obs/deploy/widget_demo_mintui.zip)，获取该组件包。
    
   
   
4. 返回环境配置，选择"维护 \> 全局元素 \> 页面资产管理 \> 组件"，单击"提交新组件"，将自定义组件包上传至组件库。 
   图4上传组件   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001992296725.png "点击放大")
   表2上传自定义组件参数说明 
   | 参数    | 说明                                           | 示例                                                                              |
   |:---|:---|:---|
   | 名字    | 新提交组件的名称，系统会根据组件包名称自动填充。                     | widgetdemomintui                                                                |
   | 上传源文件 | 组件源文件包。                                      | 选择[3.d]中的widget_demo_mintui.zip |
   | 场景    | 组件包的应用场景，可同时选择多个。                            | 高级页面                                                                            |
   | 发行说明  | 组件的描述信息，按需进行设置。此处配置的信息，将会在组件详情页的"概况"页签中进行显示。 | 自定义组件                                                                           |
      
   
   
5. 关闭Vue3框架渲染组件开关。 
   本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。
   图5界面报错   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001953304910.png)
   1. 在应用设计器中，单击左侧导航栏中的"设置"。
   
   2. 在"高级设置"中，取消勾选"页面组件的渲染框架由Vue2升级为Vue3"开关。
      图6取消选中   
      ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001987234061.png "点击放大") 
   
   
   
   
6. 在应用设计器中，选择"界面"，单击高级页面后的"+"，新建一个高级页面。
7. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001944310588.png)，从"全部 \> 自定义"中拖拽widget_demo_mintui组件到右侧画布中。
   
   图7拖拽组件到画布中   
   ![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001944313476.png "点击放大")
   
   
8. 单击页面上方的![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001944469900.png)，保存高级页面后，单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001971588773.png)，发布高级页面。
9. 单击![](https://support.huaweicloud.com/bestpractice-astrozero/zh-cn_image_0000001944310592.png)，进入预览页面，查看效果是否符合预期。