开发第一个自定义组件

自定义组件采用 vue 框架，如果您：

1. 有vue开发经验，可以直接上手开发自定义组件。

2. 没有使用过vue，建议先简单学习一下 Vue（Vue官网 (opens new window)），再回头阅读本手册。

看一个最简单的示例：

第一步：我们先编写一个最简单的 vue 组件，文件名：firstComponent.vue，代码如下:

<template>
    <div class="demo">
        Hello: {{ myName }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            myName: "Developer233"
        }
    }
}
</script>
<style>
    .demo {
        width: 100%;
    }
</style>

第二步：找到管理后台的「自定义组件」管理界面，点击「新建」并上传该文件

第三步：在布局设计器中，找到「自定义组件」工具箱，即可看到该组件，并将其拖入到页面布局中

第四步：在前端界面中，即可看到「第一个自定义组件」加载后的界面

示例：

1. 定制化打印

2. 定制化图表

3. 嵌入第三方系统

4. 更多示例请戳这里 (opens new window)