当前位置：首页 > news >正文

goView二开低代码平台1.0

news 来源：原创 2025/7/15 13:14:21

官网文档地址：GoView 说明文档 | 低代码数据可视化开发平台

简介：GoView 是一个拖拽式低代码数据可视化开发平台，通过拖拽创建数据大屏，使用Vue3框架，Ts语言和NaiveUI组件库创建的开源项目。安装步骤和地址文档里都有这里就不介绍了，本文主要介绍怎么基于goView项目实现低代码平台开发的大致介绍。

本文实现需求：创建新的根目录，与子目录和自定义组件

第一步：找到src下的packages下的index.d.ts,

第二步：添加新根目录（注意名称对应）

第三步：根标签要添加一个图标view/chart/ContentCharts/hooks/useAside.hook.ts下添加图标

第四步：到packages下的components新建一个文件夹，注意文件夹名称要对应，此时文件夹为空，观察同级文件夹结构为index.ts和index.d.ts和几个文件夹，所以我们需要在新建的这个文件夹下新建一个文件夹，一个index.ts和index.d.ts，当然也可以直接复制同级下面的

我新建了一个文件夹（因为我想做一个轮播图所以就这样命名了），此处解释一下index.ts和index.d.ts的作用，index.ts用来引入各个自定义的子分类，一起导出，index.d.ts就是子分类的命名所以我这里的命名如下（其实就是第二层分类，这里也可以定义一个大的名字比如：装饰，然后里面多添加几个子组件）

第五步：此时记住上图导出的这个变量，把他引入到src/packages/index.ts内

第六步：这里我们要准备一张图片，用来显示当作缩略图，把这张图片放在src/assets/images/chart/根文件夹名称/图片.png(注意图片命名要和自定义组件名称一致所以我这里的图片命名为carousel01.png)

第七步：自定义组件里面的结构是index.ts文件加上自定义组件的文件夹，这里index.ts的作用和外层的是一样的其中Carousel01内的结构为，可从其他文件复制也可自己新建（建议直接复制过来），这里我们首先看四个文件中的index.ts改成下图，请仔细观察下图进行配置，

第八步：最里层的index.ts文件写好了，可以写外层的index.ts了，如下图，请注意名称一致

第九步：内层剩余三个文件介绍其中config.ts是用来定义变量的，index.vue就是自定义的组件，而config.vue就是右侧的自定义编辑板

config.vue：

<template><!-- 设置项内容 --><CollapseItem name="内容" expanded><SettingItemBox name="文字" alone><SettingItem><n-input v-model:value="optionData.dataset" size="small"></n-input></SettingItem></SettingItemBox></CollapseItem>
</template><script setup lang="ts">
import { PropType } from 'vue'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { option } from './config'const props = defineProps({optionData: {type: Object as PropType<typeof option>,required: true}
})
</script>
<style scoped lang="scss">
.bgcss{::v-deep(.item-right){grid-template-columns: 1fr !important;}
}
</style>

index.vue:

<template><!-- 展示渲染文件 --><div>{{dataset}}</div>
</template><script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { getUUID } from '@/utils'
const props = defineProps({chartConfig: {type: Object as PropType<CreateComponentType>,required: true}
})
const id = getUUID()
const { w, h } = toRefs(props.chartConfig.attr)
const { dataset } = toRefs(props.chartConfig.option)</script><style lang="scss" scoped>
.button01{width:100%;height:100%
}
</style>

config.ts:

// 数据相关文件
import { PublicConfigClass } from '@/packages/public'
import { chartInitConfig } from '@/settings/designSetting'
import { CreateComponentType } from '@/packages/index.d'
import { Carousel01Config } from './index'
import cloneDeep from 'lodash/cloneDeep'export const option = {dataset: '666666轮播图'
}export default class Config extends PublicConfigClass implements CreateComponentType {public key = Carousel01Config.keypublic attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }public chartConfig = cloneDeep(Carousel01Config)public option = cloneDeep(option)
}

效果图：

此处我的子目录没有显示，因为我只有一个分类所以才不显示，可以重复上面的操作再加一个分类就会有分类了，至于怎么让这里的文本变成轮播图直接在index.vue和config.vue里面改就可以了

goView原理：我的大致理解是左边显示出来的都是图片，每个图片有对应的key值，当拖拽或选中某个图片是根据key只找到对应组件，进行动态创建。可以看下这篇文章：理解了GoView低代码平台（可视化大屏）的开发原理，基于它进行了二开-CSDN博客

相关文章：