DataV官網：https://datav-vue3.jiaminghi.com/guide/
vue2中是沒有問題的，這是第一次在vue3中使用發現的報錯問題
報錯問題?
首先安裝：
pnpm add @dataview/datav-vue31. 全局注冊報錯??
然后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)))}}
}
這就是完整的了，這樣就可以正常使用其中的組件了，其實也就用了邊框~?
輸入)
