Vue3使用dataV报错问题解决

news2025/1/12 6:55:05

DataV官网:https://datav-vue3.jiaminghi.com/guide/

vue2中是没有问题的,这是第一次在vue3中使用发现的报错问题

报错问题 

首先安装:

pnpm add @dataview/datav-vue3

1. 全局注册报错  

然后main.ts全局注册 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import dataV from '@dataview/datav-vue3'

const app = createApp(App)

app.use(router)
   .use(dataV)
app.mount('#app')

然后我们pnpm dev启动的时候直接报错,并且发现dataV下面有波浪线报错 

2. 按需引入报错 

<template>
  <div class="index">
    <div class="charts-content">
      <BorderBox1>Content</BorderBox1>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { BorderBox1 } from '@dataview/datav-vue3'
</script>
<style scoped>

发现还是同样的报错

解决:

后来发现该库中的package.json中给的出口有问题

找到node_modules/@dataview/datav-vue3/package.json

"module": "./es/index.js",
修改为
"module": "./es/index.mjs",// 修改后的

如果要全局注册的话还需要在node_modules/@dataview/datav-vue3/es/index.mjs添加:

//D, E, G, I, K, g, C, P, h, k, u, w, z, N, Q, S, U, W, Y, _, oo, eo分别是BorderBox1...等组件
export default function(app) {
  const components = [D, E, G, I, K, g, C, P, h, k, u, w, z, N, Q, S, U, W, Y, _, oo, eo]
  components.forEach(component => {
		app.component(component.name, component);
	})
}

或者

export default {
  install(app) {
    const components = [D, E, G, I, K, g, C, P, h, k, u, w, z, N, Q, S, U, W, Y, _, oo, eo]
    components.forEach(component => {
      app.component(component.name, component);
    })
  }
}

上述修改完之后就可以正常引入使用了,但我们修改的是node_modules中的源码,如果下次再安装npm install安装依赖的时候还是会有同样的问题,所以我们要在package.json中scripts中添加脚本,即执行完npm install之后再自动执行一个脚本将node_modules中的源码替换掉,这需要我们提前将修改好的文件放在项目目录中,如下: 

新建lib文件夹,将修改好的文件放在其中

然后在package.json中scripts中添加

"scripts": {
  "postinstall": "node install-datav-patch.js"
}

然后在根目录下新建install-datav-patch.js文件:

 install-datav-patch.js

const path = require('path')
const fs = require('fs')

const libPackagePath = path.join(__dirname, 'lib/dataview/datav-vue3/package.json')
const libIndexPath = path.join(__dirname, 'lib/dataview/datav-vue3/es/index.mjs')
const modulesPackagePath = path.join(__dirname, 'node_modules/@dataview/datav-vue3/package.json')
const modulesIndexPath = path.join(__dirname, 'node_modules/@dataview/datav-vue3/es/index.mjs')

fs.writeFileSync(modulesPackagePath, fs.readFileSync(libPackagePath))
fs.writeFileSync(modulesIndexPath, fs.readFileSync(libIndexPath))

最后再重新执行npm install或者pnpm install方法即可 

报错补充:

首先上面按照上面步骤修改之后,确实是可以正常展示了,但是又发现个新问题,就是当我们在使用了上面其中的组件的页面进行页面跳转时,会发现跳转不了,控制台报错如下: 

 

然后又去看了下源码,发现在node_modules/@dataview/datav-vue3/es/components里面每个组件里面都有段逻辑一样的代码如下:

 

这是个函数,然后我们去打印了一下$el,在进入页面正常加载时正常打印就是当前组件实例,但是当跳转页面时,也就是离开页面是,这块儿$el会打印个null,直接导致不能跳转,所以我们在这儿加个try catch就行了,这就要我们在每个组件里面都要修改一下:

 

全都换成这种写法,然后我们要把改好的components这个文件夹也拷贝到上面创建的lib里面,那么install-datav-patch.js这个脚本逻辑也要修改一下,如下: 

const path = require('path')
const fs = require('fs')

const libPackagePath = path.join(__dirname, 'lib/dataview/datav-vue3/package.json')
const libIndexPath = path.join(__dirname, 'lib/dataview/datav-vue3/es/index.mjs')
const libComponentsPath = path.join(__dirname, 'lib/dataview/datav-vue3/es/components')

const modulesPackagePath = path.join(__dirname, 'node_modules/@dataview/datav-vue3/package.json')
const modulesIndexPath = path.join(__dirname, 'node_modules/@dataview/datav-vue3/es/index.mjs')
const modulesComponentsPath = path.join(__dirname, 'node_modules/@dataview/datav-vue3/es/components')

fs.writeFileSync(modulesPackagePath, fs.readFileSync(libPackagePath));
fs.writeFileSync(modulesIndexPath, fs.readFileSync(libIndexPath));

fs.rmdirSync(modulesComponentsPath, { recursive: true, force: true });

const dirs = [{
  absolutePath: libComponentsPath,
  realtivePath: ''
}]

for(let dir of dirs) {
  fs.mkdirSync(path.join(modulesComponentsPath, dir.realtivePath))
  const names = fs.readdirSync(dir.absolutePath)
  for(let name of names) {
    const stat = fs.statSync(path.join(dir.absolutePath, name))
    if(stat.isDirectory()) {
      dirs.push({
        absolutePath: path.join(dir.absolutePath, name),
        realtivePath: path.join(dir.realtivePath, name)
      })
    } else if(stat.isFile()) {
      fs.writeFileSync(path.join(modulesComponentsPath, dir.realtivePath, name), fs.readFileSync(path.join(dir.absolutePath, name)))
    }
  }
}

这就是完整的了,这样就可以正常使用其中的组件了,其实也就用了边框~ 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1240607.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

服务器中了elbie勒索病毒解决办法,elbie勒索病毒解密数据恢复

科技技术的不断发展&#xff0c;为企业的生产运营提供了极大便利&#xff0c;但网络安全威胁也不断增加&#xff0c;近期云天数据恢复中心陆续接到很多企业的求助&#xff0c;企业的服务器中了elbie勒索病毒&#xff0c;导致系统瘫痪&#xff0c;所有业务无法正常开展&#xff…

TypeScript 学习笔记 第二部分 webpack 创建typescript项目

【视频链接】尚硅谷TypeScript教程&#xff08;李立超老师TS新课&#xff09; 创建webpack 项目 IDE&#xff1a;webstorm 新建一个空的项目运行npm init初始化项目目录结构 1. 安装 webpack&#xff1a;构建工具webpack-cli&#xff1a; webpack的命令行工具typescript&am…

【PHP】PHP生成全年日历

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

Linux网络——传输层

目录 一.再谈端口概念 二.UDP协议 1.UDP协议格式 2.UDP的特点 3.面向数据报 4.UDP的缓冲区 5.UDP使用注意事项 6.UDP协议在内核中的表现形式 7.基于UDP的应用层协议 三.TCP协议 1.TCP协议格式 2.TCP确认应答机制 3.超时重传机制 4.TCP报文六位标志位 5.滑动窗口 6…

某60区块链安全之Call函数簇滥用实战二学习记录

区块链安全 文章目录 区块链安全Call函数簇滥用实战二实验目的实验环境实验原理实验内容实验步骤EXP利用 Call函数簇滥用实战二 实验目的 学会使用python3的web3模块 学会并区分以太坊call、staticcall、delegatecall三种函数调用的特点 找到合约漏洞进行分析并形成利用 实验…

RK3588平台开发系列讲解(嵌入式AI篇)RKNPU详解

文章目录 一、CPU、GPU、FPGA和NPU介绍二、CPU、GPU、FPGA和NPU区别三、NPU 应用四、RKNPU沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 本篇将给大家介绍什么是RKNPU。 一、CPU、GPU、FPGA和NPU介绍 二、CPU、GPU、FPGA和NPU区别 若考虑成本、功耗、计算能力以及体…

for 循环变量的声明方式

获取字符串中的第一个单词&#xff0c;for 循环中的 &value 声明比较特殊&#xff0c;结合图1编译器的提示&#xff0c;value 是一个 u8 类型。 fn get_first_world(s: &str) -> &str {let bytes s.as_bytes();for (i, &value) in bytes.iter().enumerate…

论文笔记:Localizing Cell Towers fromCrowdsourced Measurements

2015 1 Intro 1.1 motivation opensignal.com 、cellmapper.net 和 opencellid.org 都是提供天线&#xff08;antenna&#xff09;位置的网站 他们提供的天线位置相当准确&#xff0c;但至少在大多数情况下不完全正确这个目标难以实现的原因是蜂窝网络供应商没有义务提供有…

0基础学习VR全景平台篇第122篇:VR视频剪辑和输出 - PR软件教程

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 开始之前如果没有接触过pr这款软件的话&#xff0c;建议先去看上一篇 认识视频剪辑软件Premiere 大致了解一下pr。 回到正题今天来教大家VR视频的剪辑和输出 我们先双击打开…

5-6求1-20的阶乘和

#include<stdio.h> //求阶乘 int main(){int n;double sum0;//求和&#xff1a;一点一点加int t1;for (n1;n<15;n){tt*n;sumsumt;}printf("结果是&#xff1a;%22.15e \n",sum);return 0; }为啥最后是%22.15e呢&#xff1f; 因为这个求和的结果太大了 所以转…

基于JavaWeb+SSM+Vue家庭记账本微信小程序系统的设计和实现

基于JavaWebSSMVue家庭记账本微信小程序系统的设计和实现 源码获取入口前言主要技术系统设计功能截图Lun文目录订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 源码获取入口 前言 1.1选题背景 互联网是人类的基本需求&#xff0c;特别是在现代社会&#xff0c;个人…

MongoDB的常用操作以及python连接MongoDB

一,MongoDB的启动 mongod --dbpath..\data\db mongodb注意同时开两个窗口&#xff0c;不要关&#xff01; 二, MongoDB的简单使用 简单介绍一下mongoDB中一些操作 show dbs: 显示所有数据库 show databases: 显示所有数据库 use xxxx: 使用指定数据库/创建数据库&#xff08…

Jina AI 的 8K 向量模型上线 AWS Marketplace,支持本地部署!

在当前多模态 AI 和大模型技术风头正劲的背景下&#xff0c;Jina AI 始终领跑于创新前沿&#xff0c;技术领先。2023 年 10 月 30 日&#xff0c;Jina AI 隆重推出 jina-embeddings-v2&#xff0c;这是全球首款支持 8192 输入长度的开源向量大模型&#xff0c;其性能媲美 OpenA…

【计算机基础】通过插件plantuml,实现在VScode里面绘制状态机

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

frp内网穿透配置以及相关端口、过程解释

介绍 假设现有外网笔记本、云服务器、内网工作站三台设备&#xff0c;希望使用外网笔记本通过云服务器转发&#xff0c;访问内网工作站&#xff1b;这里使用frp进行内网穿透。 云服务器端配置 登录腾讯轻量型云服务器控制台&#xff0c;开放转发端口、bind_port以及deshboad…

【开源】基于JAVA的开放实验室管理系统

项目编号&#xff1a; S 013 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S013&#xff0c;文末获取源码。} 项目编号&#xff1a;S013&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容2.1 实验室类型模块2.2 实验室模块2.3 实…

黑马React18: ReactRouter

黑马React: ReactRouter Date: November 21, 2023 Sum: React路由基础、路由导航、导航传参、嵌套路由配置 路由快速上手 1. 什么是前端路由 一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候&#xff0c;path 对应的组件会在页面中进行渲染 2. …

【开源】基于JAVA的音乐偏好度推荐系统

项目编号&#xff1a; S 012 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S012&#xff0c;文末获取源码。} 项目编号&#xff1a;S012&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、系统设计2.1 功能模块设计2.1.1 音乐档案模块2.1…

基于爬行动物算法优化概率神经网络PNN的分类预测 - 附代码

基于爬行动物算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于爬行动物算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于爬行动物优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

SSM之Mybatis框架

1 概述 1.1 什么是Mybayis 它是一款半自动的ORM持久层框架&#xff0c;具有较高的SQL灵活性&#xff0c;支持高级映射(一对一&#xff0c;一对多)&#xff0c;动态SQL&#xff0c;延迟加载和缓存等特性&#xff0c;但它的数据库无关性较低。 1.2 什么是ORM ORM&#xff08;…