Vue3使用DataV报错无法使用的解决方案

项目场景：

使用Vue3使用DataV出现的一系列问题，在此记录一下。

 DataV地址：http://datav.jiaminghi.com/
此处使用npm安装：

npm install @jiaminghi/data-view

同时需要安装相关的依赖：

"@jiaminghi/c-render": "^0.4.3",

"@jiaminghi/charts": "^0.2.18",

"@jiaminghi/color": "^1.1.3",

"@jiaminghi/data-view": "^2.10.0",

 

---

问题描述

问题一：

由于@jiaminghi/data-view中v-for和key不在同一个标签上，但是vue3中v-for里面，key必须和v-for写一个标签上；故而引发页面报错；直接吧 :key="i" 剪切到 template 标签里面，保存代码

注意，这样的报错文件有两个！ 

它们在相同的目录：一个是 分别是decoration3 和 decoration6 目录下 /src/main.vue文件，按照同样的步骤修改即可。

问题二：
改完上面的代码，启动项目发现页面空白，解决方案：

export default defineConfig({// ... 省略其他配置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",],},build: {// 打包时需要另外处理的commonjs规范的包commonjsOptions: {include: [/node_modules/, // 必须包含],},},
});

问题三：
不想改依赖包中的文件，使用@iamzzg/data-view替代@jiaminghi/data-view，发现dataV相关页面 报错：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')

---

最终解决方案：

以上@jiaminghi相关依赖全部弃用，使用

@kjgl77/datav-vue3

此处使用npm安装：

npm install @kjgl77/datav-vue3

使用方法：

// main.ts中全局引入
import { createApp } from 'vue'
import DataVVue3 from '@kjgl77/datav-vue3'const app = createApp(App)app.use(DataVVue3)
app.mount('#app')

在.vue文件中可以直接使用:

<dv-decoration-1 :color="['pink','yellow']" style="width:200px;height:50px;" />

此时，重新启动项目你会发现没有报错，dataV相关页面也可以正常使用啦。