Solution to the problem of dataV error-reporting Vue3

Install

npm install @dataview/datav-vue3

Introduced

1. Complete introduction

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

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

Report an error

Compiled with problems:X

ERROR in ./src/ 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/ 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/: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 | (DataV, { classNamePrefix: 'dv-' });
| ^^^^^
16 | (store);
17 | (router);
18 | ('#app')

2. Introduce on demand

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

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

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

Report an error

Compiled with problems:X

ERROR in ./src/views/?vue&type=script&lang=ts (./node_modules/babel-loader/lib/!./node_modules/ts-loader/??[1]!./node_modules/vue-loader/dist/??ruleSet[0].use[0]!./src/views/?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'

Solution

1. Ignore statement warnings

File: /src/

declare module '@dataview/datav-vue3';

Configuration file modification

document:@dataview\datav-vue3/

  // "module": "./es/",
  "module": "./es/",  // After modification

3. If you use the complete introduction, you need to add the corresponding method to the datav configuration file

document:@dataview\datav-vue3/es/

// Global registration method// There is a problem, the setClassPrefix method is not handled// D, E, G... symbols represent BorderBox1, BorderBox10, BorderBox11...component nameexport default {
  install: (app, options) =&gt; {
    const components = [
	  D,
	  E,
	  G,
	  I,
	  K,
	  g,
	  C,
	  P,
	  h,
	  k,
	  u,
	  w,
	  z,
	  N,
	  Q,
	  S,
	  U,
	  W,
	  Y,
	  _,
	  oo,
	  eo,
	];
	((component) =&gt; {
		(, component);
	});
  }
}

Summarize

This is the end of this article about the solution to the problem of Vue3 installation dataV error reporting. For more information about Vue3 installation dataV error reporting, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!