自定义控件结合Vue开发教程

栏目:云星空知识作者:金蝶来源:金蝶云社区发布:2024-09-16浏览:1

自定义控件结合Vue开发教程

# 1、使用场景 苍穹平台为了满足特殊或者个性化需求提供了自定义控件来扩展平台控件,自定义控件支持原生js、jQuery、Vue、React。使用原生js或者jQuery来开发的原理是操作Dom元素,这种方式代码量多,逻辑复杂,使用Vue可以减少冗余代码,提高开发效率,本文将介绍自定义控件结合Vue开发的步骤,简化前端的开发过程 # 2、操作步骤 下载苍穹提供的Vue工程文件,此工程文件设置了打包的相关信息,提供了相关版本的依赖包。 项目目录结构: ![image.webp](/download/0100d32d252000e54928ad8357c520e3f9a6.webp) ## 2.1 开发 build文件夹内的custom.configInfo.js存放控件方案相关内容,按照自定义控件内控件方案填写 ![image.webp](/download/010002f405844c6b4cfdaa5c17af5b8c0e3f.webp) ![image.webp](/download/0100ebec50b393af44439e691e7b00ca4691.webp) JS文件放在vue_stage\src\web\isv\开发商标识\领域id\项目名称\css内 Vue组件放在vue_stage\src\web\isv\开发商标识\领域id\项目名称\components内 vue_stage\src\web\isv\开发商标识\领域id\项目名称\main.js是程序的入口,需要在此处注册组件以及接收后端的数据 ![image.webp](/download/01009d90ef2900e741de87c56e2b205df365.webp) register的第一个参数是自定义组件的名称,需要与控件方案内的方案id、打包后的文件名称一致。 我们在main.js通过import引入Vue库和自己写的Vue组件库,这里我将TodoList的组件名称改为App.vue,就是我们熟悉的普通Vue项目了 ![image.webp](/download/01004d729618b1814b268b2f14881bad3744.webp) 后端传来的数据存放于props,我们需要将props设置为全局变量来在别的组件内使用。 ![image.webp](/download/0100d6478a2a2afe4256a108533a5e97bf1e.webp)到这里,我们可以成功接收到后端传来的数据进行前端的开发

vue_stage.zip

自定义控件结合Vue开发教程

# 1、使用场景苍穹平台为了满足特殊或者个性化需求提供了自定义控件来扩展平台控件,自定义控件支持原生js、jQuery、Vue、React。使用原生...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息