vue3 js引入DataV方法及报错处理

官方地址（ps：vue3方法开发中，

组件有点少，只有边框和装饰，所以我vue3项目使用的vue2用法）：

        vue2地址

        vue3地址 

1.下载依赖包 npm和yarn方法都可以

npm install @jiaminghi/data-view

yarn add @jiaminghi/data-view

2.全局引用 ，局部引用请参考官方地址

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

 3.报错及解决办法

        3.1引入文件遍历错误

挂载全局以后，重启页面会报错

<template v-for> key should be placed on the <template> tag.

依赖包引入报错，需要在/node_modules/jiaminghi/data-view/lib/components/decoration6/src/main.vue 下

 将:key = 'i'移动到<template>上，在template上遍历，key位置错误

这个错误改完还有/node_modules/jiaminghi/data-view/lib/components/decoration3/src/main.vue文件需要修改（相同错误，相同修改方法），修改后重启项目

        3.2 vite构建报错

vite开发时会对依赖进行预构建,由于dataV源码中引入了其他commonjs包,而vite没有将这些依赖预构建转成esm,所以需要在vite.config.js中配置告知vite哪些依赖需要转成esm格式,配置在optimizeDeps.include,参考博文

配置方法（vite.config.js）： 

import { defineConfig, loadEnv } from "vite";
export default defineConfig(({ mode }) => {

    return{
         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",
      ],
    },


    }

})

4.在页面中使用

<template>
  <div>
    <dv-scroll-board class="scroll-board" :config="config" />
  </div>
</template>

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

const config = {
  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>
<style scoped lang="less"></style>

5.效果