Vue3安装dataV报错以及解决方案

安装

npm install @dataview/datav-vue3

引入

1. 完整引入

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

const app = createApp(App);
app.use(dataV);
app.use(store);
app.use(router);
app.mount('#app');

报错

Compiled with problems:X

ERROR in ./src/main.ts 12:0-41

Module not found: Error: Can't resolve '@dataview/datav-vue3' in 'E:\Work\VSCodeTest\training\test\vue-test\src'


ERROR in ./src/main.ts 12:0-41

Module not found: Error: Can't resolve '@dataview/datav-vue3' in 'E:\Work\VSCodeTest\training\test\vue-test\src'


ERROR in src/main.ts:15:9

TS2769: No overload matches this call.
  Overload 1 of 2, '(plugin: Plugin_2<[{ classNamePrefix: string; }]>, options_0: { classNamePrefix: string; }): App<Element>', gave the following error.
    Argument of type 'typeof import("E:/Work/VSCodeTest/training/test/vue-test/node_modules/@dataview/datav-vue3/es/index")' is not assignable to parameter of type 'Plugin_2<[{ classNamePrefix: string; }]>'.
      Property 'install' is missing in type 'typeof import("E:/Work/VSCodeTest/training/test/vue-test/node_modules/@dataview/datav-vue3/es/index")' but required in type '{ install: (app: App<any>, options_0: { classNamePrefix: string; }) => any; }'.
  Overload 2 of 2, '(plugin: Plugin_2<{ classNamePrefix: string; }>, options: { classNamePrefix: string; }): App<Element>', gave the following error.
    Argument of type 'typeof import("E:/Work/VSCodeTest/training/test/vue-test/node_modules/@dataview/datav-vue3/es/index")' is not assignable to parameter of type 'Plugin_2<{ classNamePrefix: string; }>'.
      Property 'install' is missing in type 'typeof import("E:/Work/VSCodeTest/training/test/vue-test/node_modules/@dataview/datav-vue3/es/index")' but required in type '{ install: (app: App<any>, options: { classNamePrefix: string; }) => any; }'.
    13 |
    14 | const app = createApp(App);
  > 15 | app.use(DataV, { classNamePrefix: 'dv-' });
       |         ^^^^^
    16 | app.use(store);
    17 | app.use(router);
    18 | app.mount('#app')

2. 按需引入

<template>
  <BorderBox1>BorderBox1</BorderBox1>
</template>

<script lang='ts'>
import {
    
     BorderBox1 } from '@dataview/datav-vue3';
export default {
    
    
  components: {
    
    BorderBox1},
};
</script>

<style lang='scss'></style>

报错

Compiled with problems:X

ERROR in ./src/views/LargeDataScreen.vue?vue&type=script&lang=ts (./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/LargeDataScreen.vue?vue&type=script&lang=ts) 1:0-50

Module not found: Error: Can't resolve '@dataview/datav-vue3' in 'E:\Work\VSCodeTest\training\test\vue-test\src\views'

解决方案

1. 忽略声明警告
   文件：/src/shims-vue.d.ts

declare module '@dataview/datav-vue3';

2. dataV配置文件修改
   文件：@dataview\datav-vue3/package.json

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

3. 如果使用完整引入，需要为datav配置文件添加相应方法
   文件：@dataview\datav-vue3/es/index.mjs

// 全局注册方法
// 存在问题，未对setClassPrefix方法处理
// D、E、G...符号代表BorderBox1、BorderBox10、BorderBox11...组件名称
export default {
    
    
  install: (app, options) => {
    
    
    const components = [
	  D,
	  E,
	  G,
	  I,
	  K,
	  g,
	  C,
	  P,
	  h,
	  k,
	  u,
	  w,
	  z,
	  N,
	  Q,
	  S,
	  U,
	  W,
	  Y,
	  _,
	  oo,
	  eo,
	];
	components.map((component) => {
    
    
		app.component(component.name, component);
	});
  }
}