使用Scaffolding本地开发Vue3高级页面组件

为了提升组件开发、调测效率，华为云Astro轻应用平台提供了一款脚手架工具Scaffolding，通过此工具创建本地资产工程，可帮助您快捷实现组件的新建、本地开发、调试、预览、发布、下载等主要功能。

本章节将为您介绍Scaffolding脚手架工具的安装流程及基本使用方法。

1. 启动Scaffolding脚手架。
   在cmd命令窗口任意目录下执行“magno ui”命令，会在浏览器中自动打开图形操作界面。

   图2 Scaffolding图形操作界面首页
   

   图中区域1所示为项目管理栏，可以新建或导入本地资产工程。区域2所示为已有资产工程列表，首次使用Scaffolding脚手架工具此列表为空。若未能正常启动脚手架工具，请参考异常处理中操作进行处理。

2. 创建新应用（新应用即新资产工程）。
   1. 在Scaffolding图形界面首页中，单击“+ 新建”。
   2. 在弹出的“创建新应用”弹窗中，设置新应用目录和名称。
      图3 创建新应用-设置应用信息
      
   3. 单击“确认创建”，完成应用创建并初始化。
      您也可以单击“导入”，导入已有应用工程包。

      • 应用初始化完成后，会在脚手架图形界面首页应用列表中出现新建的应用，如下图所示。
        图4 应用创建完成
        
      • 新建的应用目录结构，如下图所示。
        图5 应用工程目录
        

        表1 目录说明

        目录	功能
        demos	预置的组件示例。
        packages	用来存放创建的组件工程，每个组件都是一个package工程。
        READMD.md	帮助文档，包含应用工程的初始化以及创建、预览、上传、及下载组件的命令行，您可以参考此文档通过命令行方式执行组件开发相关操作。

3. 应用设置。
   1. 便于您通过该脚手架工具访问开发环境，进行组件调试、发布等操作，您需要使用OAuth 2.0协议客户端模式进行接入认证。
      • 如果您已完成新建认证密钥操作，且已生成下图中认证信息。请单击上图操作列中“查看密钥”按钮，密钥信息会以文件形式下载到本地，您可以从中读取客户端ID（client_id）和客户端密钥（client_secret）信息，用于应用设置。
        图6 OAuth认证
        
      • 如果您还没有新建认证密钥，请参考认证鉴权中操作进行认证。在OAuth认证过程中，新建认证密钥时授权类型需选择“客户端模式”，用户建议选择具有管理员权限（System Administrator Profile）的用户。
   2. 在首页应用列表中，单击新建的应用，进入组件管理页面。
      图7 组件管理页面
      
   3. 单击组件管理页面中的“设置”，配置开发环境信息，单击“确定”。
      图8 应用设置页面
      

      表2 应用设置参数说明

      参数	说明
      环境地址	华为云Astro轻应用开发环境的地址。
      客户端ID	通过该脚手架工具登录开发环境时所需的客户端ID，获取方法参考3.a。
      客户端密钥	通过该脚手架工具登录开发环境时所需的客户端密钥，获取方法参考3.a。
      上网代理	如果您的网络环境存在限制，需要使用代理服务器访问配置的开发环境，则需要设置。
      代理服务器地址	代理服务器的地址。 开启“上网代理”后，该参数才会显示。
      代理服务器端口	代理服务器的端口。 开启“上网代理”后，该参数才会显示。
      代理认证用户名	使用代理服务器时，代理认证的用户名。 开启“上网代理”后，该参数才会显示。
      代理认证密码	使用代理服务器时，代理认证的密码。 开启“上网代理”后，该参数才会显示。

      在应用设置过程中，如果提示“Error getting token”报错信息，请优先排查以下两条内容：

      • 确定您的网络环境访问环境时，是否需要设置上网代理。
      • 申请OAuth认证记录时，选取的用户是否具有管理员权限（System Administrator Profile）、选取的授权类型是否为“客户端模式”。

4. 新建组件。
   1. 在组件管理页面，单击“+ 新建组件”，配置新组件参数信息，单击“创建新组件”。
      图9 新建组件
      

      表3 新建组件页面参数说明

      参数	说明
      组件类型	新建组件的类型，支持如下三种类型： 高级页面组件：生成的组件工程可打包为用于高级页面开发的高级组件资产。该类型的组件会保存在本地应用工程目录下的“packages\advancedPageAssets”中。 标准页面组件：生成的组件工程可打包为用于标准页面开发的组件资产。该类型的组件会保存在本地应用工程目录下的“packages\standardPageAssets”中。 vue高级页面组件：用于开发vue单文件组件，可打包成传统的组件包，用于开发高级页面（基于此类型开发的组件不同于高级页面组件和标准页面组件，不可直接用于平台中）。该类型的组件会保存在应用工程目录下的“packages\advancedPageAssets”中。
      组件名称	新建组件的名称。
      组件描述	组件的描述信息。
      开发者	开发者信息。

   2. 成功创建组件后，组件管理页面显示如下图所示。
      图10 高级页面组件列表
      
      组件列表中，各功能按钮说明请参见表4。

      表4 组件列表中功能按钮说明

      按钮	名称	功能
      	组件编辑	用于打开“组件编辑”页面，通过在线编辑器开发组件。
      	打开本地编辑器	用于打开本地编辑器（支持Atom、Brackets、Visual Studio Code、IDEA、Notepad++、PyCharm、PhpStorm、RubyMine、Sublime Text、WebStorm等编辑器），在本地编辑器中开发组件。
      	启动调试	用于启动调试，弹出页面提示“调试地址复制成功，组件Widget1的调试地址:https://localhost:8001/widget”。
      	预览	用于预览组件图形界面效果，单击后浏览器弹出新的标签页，展示组件的DOM结构，其效果与高级页面发布后预览效果一致。组件DOM结构更改后，此页面会动态更新。
      	组件设置	用于配置组件依赖的Library资源。
      	编译	用于编译组件，编译成功后会提示组件资产包的路径。
      	发布	可将本地的该组件资产上传到环境的组件库中。发布后，在对应开发环境的组件库中可以查看发布的组件。

      在应用的“packages > advancedPageAssets”目录中，可查看新建的组件“newwidget”，其目录结构如下图所示：

      图11 组件目录结构
      

      表5 组件目录说明

      目录/文件	功能
      dist	单击功能按钮中的“编译”按钮才会生成此目录，用于存放编译打包后的组件资产包。
      preview	单击功能按钮中的“预览”按钮才会生成此目录，其内容为组件预览页面的代码。
      widget	组件的源码包，在此目录中进行组件的开发，其中各文件的详细说明请参考在线开发华为云Astro轻应用高级页面自定义组件。
      package.json	应用工程中当前组件工程包的元数据文件。

5. 组件的预览与发布。

   组件发布成功后，可以先试用下组件的预览与发布功能。

   1. 预览：单击功能按钮中的“预览”按钮。
      图12 预览效果
      

      在弹出的预览页面显示的“the dom of the widget”是新建组件中DOM结构所包含的元素，其代码如下图所示：

      图13 代码结构
      
   2. 发布：单击功能按钮中的“发布”按钮，在弹窗中填写组件分类等信息，确定发布后可以在开发环境创建的高级页面中使用刚发布的组件。
      图14 设置发布参数
      

      组件发布成功后，在高级页面中即可使用自定义的组件。

      图15 在高级页面使用自定义组件
      
      • 在组件发布过程中，选取的“分类”与“领域”即是该组件在环境中的分类与领域，在开发环境中需要到相应的分类与领域中的自定义组件中查看及使用。
      • 建议您在开发组件DOM结构时，使用组件的预览功能，预览功能可以动态更新组件DOM的变化。
      • 若在组件开发过程中涉及事件-动作、桥接器等功能，建议您参考6，使用组件调试功能。

6. 调试组件。

   在本地开发组件后，频繁的打包组件资产包上传至环境再查看页面显示效果，是一件效率极低的事情。通过如下配置，可打通本地开发环境与开发环境，实现实时在线调测组件。

   在进行组件调试前，需要将待调试的组件发布到开发环境组件库中，并将其拖拽到高级页面中，若您还未执行相关操作，请参考5中操作执行。

   1. 在脚手架工具“组件管理”页面中，单击待调试组件所在行的（如本例中的“newWidget”），启动该组件的调试功能，系统会弹出“调试地址复制成功”提示框，说明您已成功启动组件调试并已复制调试地址。
      图16 调试地址复制成功
      
   2. 在成功获取组件调试地址后，需要设置该组件的本地调试能力。
      在左侧导航栏中，选择“界面”。单击“更多 > 页面设置”，在“插件”页签单击“本地调试设置”。

      图17 本地调试设置
      
   3. 配置该组件的“本地资源访问根路径”，此路径即为在6.a启动组件调试后复制的调试路径，在输入框中粘贴后单击“确认”。
      配置后，在预览该应用中使用该组件的高级页面后，会读取您本地资产工程文件夹下的组件包配置数据。在“本地调试设置”弹窗中只会展现通过脚手架工具发布且已拖入高级页面的组件。

      图18 配置调试地址
      
   4. 在使用该组件的高级页面中，单击、再单击，可查看该组件效果。
   5. 高级页面发布预览后，就可以实现在本地资产工程中修改组件的代码进行调试。

      在脚手架工具“组件管理”页面，单击该组件所在行的组件编辑按钮，可打开“组件编辑”页面开发组件（或者单击打开本地编辑器按钮，在本地编辑器开发组件）。然后在开发环境中刷新后预览新状态，进行调试开发。

   6. 组件调试完成后，在“页面设置 > 插件”页签，单击“本地调试设置”，在“本地调试设置”页面选中该组件单击“清空本地资源访问根路径”，就会读取对应版本组件库中的配置数据，手动关闭调试功能。
      您也可以设置本地路径有效期，例如设置2，表示2天后系统自动清空所有的本地资源访问根路径，关闭调试功能。

      图19 关闭本地调试功能
      
   7. 至此，已完成本地组件的开发、调试工作，可以将其发布到环境中正式使用。

      在脚手架工具“组件管理”页面，单击该组件所在行的，可将本地的该组件资产上传到环境的组件库中。

      如果组件库中已有该组件包，会进行组件包的升级更新，升级更新后的组件需要在“界面 > 页面设置”中，选择“插件”页签，在该组件所在行的操作列单击，更新站点内该组件。

7. 下载组件。

   若您需要从开发环境中下载自定义高级组件，请参考该步骤。您可以通过Scaffolding脚手架工具下载自定义组件，也可以在“页面资产管理 > 组件”中进行下载。

   当前Scaffolding脚手架工具仅支持下载自定义组件，暂不支持下载平台预置组件。

   图20 在组件管理中单击下载组件
   
   图21 选择要下载的组件
   
   图22 返回组件管理页面预览组件
   

8. 组件设置，新增库资源。

   库是组件正常运行的依赖，在组件开发过程中可以通过Scaffolding脚手架工具配置本地资产工程中组件的依赖库。在“组件管理”页面，单击需新增库资源组件所在行的“组件设置”按钮，在弹出页面中单击“新增资源”按钮，选择所需资源库确定即可。

   图23 单击新增资源
   
   图24 添加所需的资源