Vue 大屏数据展示组件库官网：http://datav.jiaminghi.com/guide/
我的版本是：“@jiaminghi/data-view”: “^2.10.0”

一、dataV引入，看官网也可

// 安装 （ 我的安装版本 "@jiaminghi/data-view": "^2.10.0"  ）
npm i @jiaminghi/data-view

// 在main.js中全局引入
import dataV from '@jiaminghi/data-view'
app.use(dataV)

二、报错解决

1. 找到报错文件，把 :key=“i” 放到上面的 v-for那行里

可能有多个文件出错，一个一个修改就可以了，我这边是2个文件有问题
[plugin:vite:vue] <template v-for> key should be placed on the <template> tag. D:/webXjk/测试用的/vueviteproject/node_modules/@jiaminghi/data-view/lib/components/decoration3/src/main.vue:9:9 7 | > 8 | <rect 9 | :key="i" | ^

解决方法：看图片

2. 页面出现空白，看控制台报错

Uncaught SyntaxError: The requested module '/node_modules/@jiaminghi/c-render/lib/index.js?v=d94b69d5' does not provide an export named 'default'

解决方法：在 vite.config.js 需要添加代码，主要是 optimizeDeps

export default defineConfig({
  base: '/web/object',  //服务器部署到其他文件这个需要更改 或直接 '' 就可放在任意文件夹

  plugins: [vue()],
  build: {
    commonjsOptions: {
      include: [/node_modules/,]
    }
  },
  optimizeDeps: {
    // 开发时 解决这些commonjs包转成esm包
    include: [
      "@jiaminghi/c-render",
      "@jiaminghi/c-render/lib/plugin/util",
      "@jiaminghi/charts/lib/util/index",
      "@jiaminghi/charts/lib/util",
      "@jiaminghi/charts/lib/extend/index",
      "@jiaminghi/charts",
      "@jiaminghi/color",
    ],
  },
})

三、简单使用示例：轮播表 ==》表格滚动

<!-- dataV表格滚动示例 -->
<template>
  <dv-scroll-board :config="config" style="width: 500px; height: 220px" />
</template>

<script lang="ts" setup>
import { ref } from "vue";

let config = ref({
  header: ["列1", "列2", "列3"],
  data: [
    ["行1列1", "行1列2", "行1列3"],
    ["行2列1", "行2列2", "行2列3"],
    ["行3列1", "行3列2", "行3列3"],
    ["行4列1", "行4列2", "行4列3"],
    ["行5列1", "行5列2", "行5列3"],
    ["行6列1", "行6列2", "行6列3"],
    ["行7列1", "行7列2", "行7列3"],
    ["行8列1", "行8列2", "行8列3"],
    ["行9列1", "行9列2", "行9列3"],
    ["行10列1", "行10列2", "行10列3"],
  ],
});
</script>