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，我们可以利用其强大的功能并结合Vue的新特性，如Composition API和setup语法糖，来实现更加灵活和高效的组件化开发。 首先，我们来看一下如何在Vue3项目中安装和配置TinyMCE。在解压后的文件...
Vue3使用datav3报错的三个问题解决
cq_run的博客
05-15 721
修改datav源码中的package.json文件。然后修改border-box-1文件。修改styled.mjs文件。然就就会遇见新的报错问题。即可解决页面切换的问题。
vue3+Echarts+DataV可视化大屏显示
最新发布
weixin_52625246的博客
06-04 588
vue3+echarts+DataV制作可视化大屏显示
vue3 引入dataV 报错，使用patch-package记录插件包 node_modeule 修改记录。 vite 版DataV
拿回忆下酒
07-18 2186
开发数字大屏功能，引用组件库比较好用，目前分为和两个版本。这里主要说一下vue3时，引用问题。
vue3+js引入DataV方法及报错处理
qq_45752346的博客
02-20 1960
这个错误改完还有/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引入文件遍历错误。
VUE引入DataV报错记录
qq_15509267的博客
01-25 3582
类型“typeof import("g:/WSwork/vue-project/large-screen/large-screen/node_modules/@dataview/datav-vue3/es/index")”的参数不能赋给类型“Plugin
datav显示异常问题遇到的坑
weixin_44242595的博客
01-29 740
datav dv-scroll-ranking-board遇到的坑
基于Vue.js与DataV+Echarts技术的大数据可视化屏幕源码
03-25
项目概述：本项目采用Vue.js结合DataV与Echarts技术，实现了一套大数据可视化展示屏幕的源码。主要编程语言为JavaScript，涉及的技术栈包括Vue、JavaScript和HTML。项目文件结构清晰，包含57个文件，其中Vue文件20个...
vue使用技巧及vue项目中遇到的问题
08-27
Vue 使用技巧及 Vue 项目中遇到的问题 在本文中，我们将讨论一些 Vue 使用技巧和在 Vue 项目中遇到的问题，并提供解决方案。 1. Vue 路由拦截浏览器后退实现表单保存 在路由组件中，我们可以使用 `...
vue开发中遇到的问题总结
10-15
在Vue.js开发过程中，开发者经常会遇到各种挑战和问题。本文将总结一些常见的Vue开发问题及其解决方案，帮助读者理解和解决这些问题。 ### 1. 子组件修改父组件的prop 问题描述：Vue警告提示"Avoid mutating a ...
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/
Vite,Vue3项目引入dataV报错的解决方法
qq_42372534的博客
09-07 7973
背景:开发一个大屏项目中,需要是要DataV的那边边框,装饰等,只是DataV是基于vue2的,vue3版的作者还在开发中,于是翻了DataV的源码,发现使用esm方式时是直接引入源码而不经过打包,其源码中使用的vue语法vue3也支持,所以可以直接在vue3中引入使用.
【Vue3】Vue3引入DataV |BIN-DATAV 开发大屏
小龙哒的博客
11-28 913
官方网站：https://wangbin3162.gitee.io/bin-datav/#/border。
vue3引入dataV 在main.js/ts引入后报VueCompilerError: ＜template v-for＞ key should be placed on the ＜template＞
hotwateron的博客
06-14 1645
把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 4126
报错信息：Internal server error: key should be placed on the tag.
vue3做移动端适配问题
08-16
对于Vue 3移动端适配问题，可以参考以下步骤： 1. 首先，可以使用一个公共方法来判断是否为移动端。你可以将以下代码添加到你的代码中： ```javascript export function isPc() { if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) { return false; } else { return true; } } ``` 这个方法会根据用户的User Agent来判断是否为移动端。 2. 其次，你可以使用postcss-pxtorem插件来实现rem适配。在你的根目录下创建一个postcss.config.js文件，并添加以下代码： ```javascript module.exports = { "plugins": { "postcss-pxtorem": { rootValue: 37.5, // Vant 官方根字体大小是 37.5 propList: ['*'], selectorBlackList: ['.norem'] // 过滤掉.norem-开头的class，不进行rem转换 } } } ``` 这个配置文件会将像素自动转换为rem单位，方便移动端适配。 3. 如果你在针对iPad和iPad Pro设备时遇到无效的问题，你可以在index.html文件中添加以下代码： ```html <script> /(pad|pod|iPad|iPod|iOS)/i.test(navigator.userAgent) && (head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue项目的移动端适配方案](https://blog.csdn.net/weixin_40758662/article/details/131812827)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [vue3-移动端适配](https://blog.csdn.net/m0_65791412/article/details/125177494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值