链接复制成功!
我的库
在我的库中,管理系统预置的和用户自定义的库,如添加库、查看库历史版本等。系统预置的库,只能执行查看详情、查看历史版本和下载操作。本章节的操作,均以自定义库为例。
新建自定义库
以某组件中需要使用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" } ] }
- 上传自定义库。
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选中“我的资产”。
- 在左侧导航栏中,选择“我的库”,单击“添加库”。
- 单击“+”,选择待上传的库,并设置库的基本信息。
图2 上传MintUI自定义库
- 库名字:库的名称。
- 操作类型:当前操作的类型,如新增、更新等。
- 库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包,重新打包。
- 在组件Widget包(widget_demo_mintui.zip)的“packageinfo.json”文件中增加requires节点,指定需要依赖库的库ID和版本号。
- 返回华为云Astro大屏应用界面,选择“我的资产 > 我的组件”,单击“添加组件”,将3.d中的组件包上传至组件库中。
图3 上传widget_demo_mintui组件
- 组件名称:组件名称,系统会根据组件包名称自动填充。
- 操作类型:当前操作的类型,如新增、更新等。
- 组件ID:资产ID,前缀不可编辑,上传组件包后会自动填写。
- 目录名称:组件的存放目录。
- 场景:该组件包的应用场景。勾选后,在相应类型页面开发中,才可使用该组件。
- 版本说明:组件的描述信息。
- 在大屏页面中拖入该组件,预览组件效果。
进入华为云Astro大屏应用界面,从大屏开发页面的“全部组件 > 自定义组件 > 其它”中,拖入widgetdemomintui组件到设计区域,调整组件大小,单击
,预览效果。
图4 拖入自定义组件
复制自定义库到其他工作空间
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选择“我的资产”。
- 在左侧导航栏中,单击“我的库”。
- 将鼠标放在待复制的库上,单击
。
图5 复制库到其他工作空间 - 在弹出的页面,选择目标工作空间,单击“确定”。
库默认复制到目标工作空间的“我的库”下。复制自定义库到其他工作空间存在资产冲突时,会更新空间内原有的内容。
查看库详情
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选择“我的资产”。
- 在左侧导航栏中,单击“我的库”。
- 将鼠标放在对应的库上,单击
。
图6 查看库详情 - 在库详情页面,查看库名称、开发者、版本、更新时间等。
更新库
更新组件前,请先获取锁,否则更新按钮置灰不可用。
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选择“我的资产”。
- 在左侧导航栏中,单击“我的库”。
- 将鼠标放在对应的库上,单击
,获取锁。
- 将鼠标放在对应的库上,单击
,进入更新库页面。
图7 进入更新库页面 - 在库更新页面,上传新的库、设置库参数,单击“更新”。
图8 设置库信息
- 将鼠标放在对应的库上,单击
,可查看到新版本的库。
:单击该图标,可下载当前版本库。
:单击该图标,可在线编辑该版本库。
编辑库
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选择“我的资产”。
- 在左侧导航栏中,单击“我的库”。
- 将鼠标放在对应的库上,单击
。
图9 编辑库 - 在库编辑页面,单击右上角的
,获取锁。
- 按需在线修改库文件,单击
。
- 在弹出的提示框中,单击“确定”。
- 在库更新页面,按需设置库参数,单击“更新”。
- 返回我的库页面,在组件上单击
,可查看到新版本的库。
图10 查看新版本的库
查看库历史版本
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选择“我的资产”。
- 在左侧导航栏中,单击“我的库”。
- 将鼠标放在对应的库上,单击
,即可查看库的历史版本。
图11 查看库历史版本 - 在历史版本中,单击对应版本后的
,可下载库。
如果为自定义库,还支持在线编辑对应版本的库。
图12 查看对应库的历史版本
下载库
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选择“我的资产”。
- 在左侧导航栏中,单击“我的库”。
- 将鼠标放在对应的库上,单击
。
默认下载最新版本的库。如果需要下载之前版本的库,可在库的历史版本中,单击对应版本后的
。
图13 下载库
批量复制自定义库到工作空间
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选择“我的资产”。
- 在左侧导航栏中,单击“我的库”。
- 选中多个库,单击“复制到工作空间”。
您可以通过鼠标框选、“Ctrl+单击”、“Ctrl+A”或“Ctrl+Shift+框选”,来选择多个库。
图14 复制多个库到目标工作空间 - 在弹出的页面,选择目标工作空间,单击“确定”。
批量删除自定义库
- 参考登录华为云Astro大屏应用界面中操作,登录华为云Astro大屏应用界面。
- 在主菜单中,选择“我的资产”。
- 在左侧导航栏中,单击“我的库”。
- 在自定义库上,单击
,获取锁。
- 选中已锁定的多个库,单击“删除”。
您可以通过鼠标框选、“Ctrl+单击”、“Ctrl+A”或“Ctrl+Shift+框选”,来选择多个库。
图15 批量删除库 - 在弹出的确认框中,单击“确定”。