关闭Vue3框架渲染组件开关 本案例所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图1 界面报错 操作步骤 进入创建“设备维修管理系统”应用中创建的应用。 在

查看更多 →

，将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图5 界面报错

查看更多 →

调试工具 Vue Devtools是一个专为Vue.js开发者设计的浏览器扩展。它提供了一系列强大的功能，帮助开发者更容易地调试和优化他们的Vue应用程序。 Vue Devtools 以下是Vue Devtools的主要特点和功能： 组件树查看：允许用户查看完整的Vue组件层次结

查看更多 →

EchartsWidgetTemplate.js 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3。 EchartsWidgetTemplate.editor.js 组件属性定义文件，负责组件在编辑状态时需要渲染的界面和逻辑。“*

查看更多 →

，将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图4 界面报错

查看更多 →

TabsWidget.js 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3。 TabsWidget.editor.js 组件属性定义文件，负责组件在编辑状态时需要渲染的界面和逻辑。“*.editor.js”只在组件编辑状态被加载，主要包含：

查看更多 →

文件说明 TabsWidget.js 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见高级页面和Astro大屏应用中预置的API。 TabsWidget.editor.js 组件属性定义文件，负责组件在编辑状态时，需要渲染的界面和逻辑。“*

查看更多 →

，将会在组件详情页的“概况”页签中进行显示。 自定义组件 关闭Vue3框架渲染组件开关。 本实践所涉及到的自定义组件是基于Vue2框架开发的，而系统是默认开启Vue3框架渲染组件的，所以您需要手动关掉Vue3框架渲染组件开关，否则拖拽组件到页面时会提示如下报错。 图5 界面报错

查看更多 →

TabsWidget.js 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见高级页面组件中预置的API。 TabsWidget.editor.js 组件属性定义文件，负责组件在编辑状态时，需要渲染的界面和逻辑。“*

查看更多 →

图1 添加变量 选中组件，在组件属性设置面板选择“高级”。 单击“是否渲染”后的，进行变量绑定。 图2 绑定变量 选项绑定的变量，单击“确定”。 绑定成功后可根据变量state.isLogin的值，查看渲染效果。 图3 state.isLogin为false时 图4 state

查看更多 →

如果安装成功，应该可以看到npm的版本号。 安装Vue CLI Vue CLI是Vue.js的脚手架工具，可以帮助我们快速创建Vue.js应用。要使用它，我们需要先安装它。 在命令行中输入以下命令来安装Vue CLI： npm install -g @vue/cli 这个命令会全局安装Vue CLI，所以安装

查看更多 →

为展示内容添加变量，默认为item。 绑定成功后，查看渲染效果。 图3 添加变量 图4 查看渲染效果 相关概念关联： 循环数据，即需要循环渲染的数组，在这里是state.imageList。 迭代变量名，在循环渲染子项对应的变量名，默认为item。 索引变量名，循环渲染的索引变量名，默认为index。

查看更多 →

TabsWidget.js 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明。 TabsWidget.editor.js 组件属

查看更多 →

TabsWidget.js 在开发自定义组件时，需要定义“组件名.js”文件，该文件为组件逻辑文件，是整个组件的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3 组件名.js中预置API说明。 TabsWidget.editor.js 组件属

查看更多 →

新增密钥 将开发指导中生成的卡片JS进行上传管理。 将打包后的mylib.umd.min文件名修改为index，并同需要引用的静态资源压缩在同一级目录。 图4 zip示例截图 图5 上传卡片 Vue CLI生成的卡片输出为完整js，需要将其重命名为index.js，放置在zip压缩包内。否则会出现验证不通过的异常。

查看更多 →

shiftManagement.js 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明，请参见高级页面组件中预置的API。 shiftManagement.editor.js 组件属性定义文件，负责组件在编辑状态时，需要渲染的界面和逻辑。“*

查看更多 →

使用JS面板 在常规代码开发中，我们需要为某个区块或者某个元素添加一些事件，比如单击事件，同一个页面的事件会统一保存到对应的页面JS中。 很多时候我们需要自定义一些方法去复用一些逻辑，也需要用到页面JS。 需要注意的是当前的页面JS只能使用声明函数，不能使用函数表达式声明函数，也不能在页面JS中定义其他的变量。

查看更多 →

AUI为内部开源使用，外部无法访问，底层逻辑使用Vue组件暴露封装，因此在不使用AUI情况下，通过原生Vue CLI脚手架搭建组件库形式暴露卡片组件，也能够正常使用。 开发过程 准备工作中已经正常安装了Vue CLI脚手架，因此可以快速搭建Vue项目。 初始化Vue项目。 vue create my-app

查看更多 →

。 作为一种可视方式。如在销售项目空间，以图表/列表/表格等形式提供各项指标数据，用户可以根据需要删减指标卡片，调整指标卡片位置；系统也可以根据User Profile动态推送内容。 工作原理 组件化开发思想 采用Vue.js的组件化开发思想，将整体功能模块包装成一个个独立且可复

查看更多 →

页面JS 编写JS脚本 单击左侧插件栏中页面JS按钮即可打开页面JS面板。在代码编辑区中编写好代码后单击右上角保存按钮。 图1 代码编辑区 系统预先编写好了一些范例脚本，单击“展示使用帮助”可以查看提供的范例脚本。 可以将需要使用的相关范例复制，然后单击“关闭使用帮助”回到JS代码编辑页面，粘贴到代码编辑区进行使用。

查看更多 →

{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。

查看更多 →