Vue3 インストール データのエラー レポートと解決策

インストール

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