Vue3使用dataV报错问题解决

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

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

报错问题

首先安装:

javascript 复制代码
pnpm add @dataview/datav-vue3

1. 全局注册报错

然后main.ts全局注册

javascript 复制代码
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. 按需引入报错

javascript 复制代码
<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

javascript 复制代码
"module": "./es/index.js",
修改为
"module": "./es/index.mjs",// 修改后的

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

javascript 复制代码
//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);
	})
}

或者

javascript 复制代码
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中添加

javascript 复制代码
"scripts": {
  "postinstall": "node install-datav-patch.js"
}

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

install-datav-patch.js

javascript 复制代码
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方法即可

相关推荐
Mintopia10 分钟前
3D Quickhull 算法:用可见性与冲突图搭建空间凸壳
前端·javascript·计算机图形学
白日依山尽yy10 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
Mintopia11 分钟前
Three.js 三维数据交互与高并发优化:从点云到地图的底层修炼
前端·javascript·three.js
陌小路16 分钟前
5天 Vibe Coding 出一个在线音乐分享空间应用是什么体验
前端·aigc·vibecoding
成长ing1213824 分钟前
cocos creator 3.x shader 流光
前端·cocos creator
Alo36533 分钟前
antd 组件部分API使用方法
前端
BillKu36 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
GDAL38 分钟前
Object.freeze() 深度解析:不可变性的实现与实战指南
javascript·freeze
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤1 小时前
首个支持A股的AI多智能体金融系统,来了
前端·python