vue3使用Datav遇到的问题

已于 2023-05-19 09:52:23 修改
阅读量2.1k 收藏 4
点赞数 1
文章标签： vue.js npm node.js
于 2023-05-19 09:51:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu_liu_kun/article/details/130760196
版权

一、安装 npm install @jiaminghi/data-view

import dataV from '@jiaminghi/data-view'

const app=createApp(App)

app.use(dataV)

二、main.js中全局配置，而此时在main.js引入时会报错 无法识别模块

2、shims-vue.d.ts文件添加declare module '@jiaminghi/data-view'，让ts识别这个文件

三、1、引入后发现报错

2、修改源码中的代码

根据提示点击进入该文件

3、dataV插件报错，在v2中 template 标签循环不可添加key，v3 template 标签循环必须要同时添加key，修改node_modules文件如下

4、此时已经完成 

朱留坤
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
datav-vue:一个基于Vuejs3的数据可视化（DataV）项目
04-10
DataV Vue 一个基于 Vue3.x 的数据可视化项目 :flexed_biceps: Vue 3. 0+ :fire: TypeScript 4.2+ 安装与使用 # 初始化项目 yarn bootstrap # 跑起来！ yarn serve # 构建发布 yarn build 创建组件 yarn gc [component name] 创建组件 or Store yarn new Git提交模板 yarn cz 例子： [TYPE](SCOPE):DESCRIPTION#[ISSUE] # example feat(button):add type 'button' for form usage #1234 Git提交模板配置：./commitlint.config.js 注意 本项目主要用来研究与学习，如果商用请注意：项目里含有一些第三方付费素材，如：orbitron-bold 字体。
vue3中使用tinyMCE
07-01
vue3中使用tinyMCE的demo，setup语法糖写法，解压后请删除node_model包后重新cnpm i
Vue+dataV：调用后台数据，数据赋值成功，但是组件上的数据更新失败
Lzero's伊甸园
10-20 1835
刷新props时，需要生成新的props对象，或者在完成赋值后使用ES6拓展运算符来生成一个新的props对象，方式this.xxxProps = {...this.xxxProps}。dataV的组件的数据若是来自自己定义的数据，数据更新没有问题。但若数据来自axios调用后台数据获取，就存在数据获取过来，但没有更新到组件的情况。dataV框架中不具备改变vue的data数据的能力，dataV中的组件props不是深度（deep）监听。
Vue3使用dataV报错问题解决
m0_51431448的博客
11-22 6957
找到node_modules/@dataview/datav-vue3/package.json。然后我们pnpm dev启动的时候直接报错，并且发现dataV下面有波浪线报错。最后再重新执行npm install或者pnpm install方法即可。后来发现该库中的package.json中给的出口有问题。然后在package.json中scripts中添加。新建lib文件夹，将修改好的文件放在其中。然后main.ts全局注册。
Vue3使用datav3报错的三个问题解决
最新发布
cq_run的博客
05-15 415
修改datav源码中的package.json文件。然后修改border-box-1文件。修改styled.mjs文件。然就就会遇见新的报错问题。即可解决页面切换的问题。
vue3 引入dataV 报错，使用patch-package记录插件包 node_modeule 修改记录。 vite 版DataV
拿回忆下酒
07-18 2120
开发数字大屏功能，引用组件库比较好用，目前分为和两个版本。这里主要说一下vue3时，引用问题。
vue3+js引入DataV方法及报错处理
qq_45752346的博客
02-20 1516
这个错误改完还有/node_modules/jiaminghi/data-view/lib/components/decoration3/src/main.vue文件需要修改（相同错误，相同修改方法），修改后重启项目。依赖包引入报错，需要在/node_modules/jiaminghi/data-view/lib/components/decoration6/src/main.vue 下。将:key = 'i'移动到<template>上，在template上遍历，key位置错误。3.1引入文件遍历错误。
Vite,Vue3项目引入dataV报错的解决方法
qq_42372534的博客
09-07 7247
背景:开发一个大屏项目中,需要是要DataV的那边边框,装饰等,只是DataV是基于vue2的,vue3版的作者还在开发中,于是翻了DataV的源码,发现使用esm方式时是直接引入源码而不经过打包,其源码中使用的vue语法vue3也支持,所以可以直接在vue3中引入使用.
【Vue3】Vue3引入DataV |BIN-DATAV 开发大屏
小龙哒的博客
11-28 863
官方网站：https://wangbin3162.gitee.io/bin-datav/#/border。
vue使用技巧及vue项目中遇到的问题
08-27
主要介绍了vue使用技巧及vue项目中遇到的问题,本文给大家带来的只是一部分，后续还会持续更新，感兴趣的朋友跟随脚本之家小编一起学习吧
可视化大屏 Vue3 版本基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）开发
05-03
可视化大屏 Vue3 版本，基于 Vue3、Typescript、DataV、ECharts5 框架的大数据可视化（大屏展示）开发。此项目使用'.vue' 和 '.tsx' 文件实现界面，采用新版动态屏幕适配方案，全局渲染组件封装，支持数据动态刷新...
jiaminghi/data-view dataV for vite2 vue3 windows补丁 for cnpm
02-22
官网直接安装的不支持vite2+vue3的 主要修复： 1.build或者dev项目时不报错，兼容vite2，vue3； 2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm pnpm可通用的，就是底层node_modules位置不一样而已，不过修改原理都是一样的，大家可以自行下载研究，目前仅在windows下测试，macos跟linux还未测试。 下面说下安装步骤： 1.在项目更目录中安装，执行cnpm install @jiaminghi/data-view即可； 2.将other_modules压缩包解压并覆盖到项目的node_modules文件夹下即可 调用方法，请参考官网文档http://datav.jiaminghi.com/
vue 出现data-v-xxx的原因及解决
10-15
主要介绍了vue 出现data-v-xxx的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jiaminghi/data-view dataV for vite2 vue3 windows补丁 for pnpm
03-19
官网直接安装的不支持vite2+vue3的 主要修复： 1.build或者dev项目时不报错，兼容vite2，vue3； 2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm pnpm可通用的，就是底层node_modules位置不一样而已，不过修改原理都是一样的，大家可以自行下载研究，目前仅在windows下测试，macos跟linux还未测试。 下面说下安装步骤： 1.在项目更目录中安装，执行pnpm install @jiaminghi/data-view即可； 2.将other_modules压缩包解压并覆盖到项目的node_modules文件夹下即可 调用方法，请参考官网文档http://datav.jiaminghi.com/
jiaminghi/data-view dataV for vite2 vue3 windows补丁 for npm/yarn
03-20
官网直接安装的不支持vite2+vue3的 主要修复： 1.build或者dev项目时不报错，兼容vite2，vue3； 2.加入deep监听watch，直接在父组件中修改图表中的config参数即可完成图表中的数据变更。 yarn npm cnpm pnpm可通用的，就是底层node_modules位置不一样而已，不过修改原理都是一样的，大家可以自行下载研究，目前仅在windows下测试，macos跟linux还未测试。 下面说下安装步骤： 1.在项目更目录中安装，执行npm install @jiaminghi/data-view即可； 2.将other_modules压缩包解压并覆盖到项目的node_modules文件夹下即可 调用方法，请参考官网文档http://datav.jiaminghi.com/
vue3引入dataV 在main.js/ts引入后报VueCompilerError: ＜template v-for＞ key should be placed on the ＜template＞
hotwateron的博客
06-14 1570
把template标签变为div，将v-for 和 key 放入div中，两个文件都要改，改完你会发现运行还报错；把项目关掉重新打开，记住是重新打开这个项目文件运行，而不是重新运行。
vue引入DataV时的报错解决办法 Internal server error: ＜template v-for＞ key should be placed on the ＜template＞ ta
m0_64664995的博客
06-27 3808
报错信息：Internal server error: key should be placed on the tag.
Vue2与Vue3—引入DataV
小白的豪豪
08-07 1093
解决：将 :key = "i" 剪贴到 上面template 中，如下。
Vue3中按需导入使用dataV的vue3版本
一只想躺平却不敢躺平的小菜鸟
05-05 4996
Vue3中按需导入使用dataV的vue3版本
vue3 datav使用
07-28
使用 Vue 3 DataV，首先需要在项目中安装它的依赖包。可以通过 npm 或者 yarn 进行安装，具体命令如下： ```bash npm install @jiaminghi/data-view ``` 或者 ```bash yarn add @jiaminghi/data-view ``` 安装...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值