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);
	});
  }
}

总结

到此这篇关于Vue3安装dataV报错问题解决方案的文章就介绍到这了,更多相关Vue3安装dataV报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！