可以导出Vue3+TypeScript+Vite源码的可视化工具

最近找到一款可视化大屏的制作工具，导出的源码包含了完整的框架，其中大屏可以作为一个独立的组件嵌入到别的项目中，废话不多说，下面看效果。

导出的源码，看着还是非常规整的，跟我们自己手敲的代码基本相似，由于代码较多，我就截取了一部分放在了下面：

<script setup lang="ts">
import { onMounted } from 'vue'
/** 导入场景 */
import bgScene from './scene.vue'
import config from './config.json'
import { usePageStore } from '../commons/stores/pageStore'
import { useAutoSize1 } from '../commons/hook/useAutoSize'

/** 模块化组件 */
import ZvChartBarGradientColumnChartotaz from './components/zv-chart-bar-gradieno/index.vue'
import ZvTextOverNumberecaF from './components/zv-text-over-number-ecaF/index.vue'

const { pageRef, transform } = useAutoSize()

onMounted(() => usePageStore().setCurrentPage(config))
</script>
<template>
    <div class="shj-page autoAdapter" ref="pageRef">
        <div class="shj-page-content" :style="{ transform }">
            <bg-scene></bg-scene>
            <div class="layer-wrap layer-wrap_iXHRbd" id="zv-JP5nFHXwXptvgQWABuXa">
                <div class="layer-main">
                    <div class="layer">
                        <p class="text-VVBE">数据统计</p>
                    </div>
                </div>
            </div>
            <div class="layer-wrap layer-wrap_CTyCLi" id="zv-8t1uPX721dh6QjxA0HfK">
                <div class="layer-main">
                    <div class="layer">
                        <p class="text-BKtA">当前时间</p>
                    </div>
                </div>
            </div>
            <div class="layer-wrap layer-wrap_JUCDib" id="zv-sBVnBzcExhIYbo2vdxqs">
                <div class="layer-main">
                    <div class="layer">
                        <h1 class="text-TcZi">山河鉴可视化</h1>
                    </div>
                </div>
            </div>
            <div class="layer-wrap layer-wrap_NUuCYm" id="zv-ImKY9uRd8ajiI31FsFNN">
                <div class="layer-main">
                    <div class="layer">
                        <div class="img-aTbm"></div>
                    </div>
                </div>
            </div>
            <div class="layer-wrap layer-wrap_qZoJdK" id="zv-ZNfjMHlGn7Sa1q0JOYZ7">
                <div class="layer-main">
                    <div class="layer">
                        <ZvChartBarGradientColumnChartotaz />
                    </div>
                </div>
            </div>
            <div class="layer-wrap layer-wrap_WTeadd" id="zv-sEONtdecksvZYwK9l9R5">
                <div class="layer-main">
                    <div class="layer">
                        <ZvTextOverNumberecaF />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

然后看看大屏的效果图，整体感觉很丝滑，效果也在线，而且还有很多的素材可以使用：


具体的大家可以去他们工具里面去看看，对于我这种天天干私活的人帮助很大🤭，节约了很多的时间。

山河鉴可视化工具官网