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';exportdefault{
  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

declaremodule'@dataview/datav-vue3';

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

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

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

// 全局注册方法// 存在问题，未对setClassPrefix方法处理// D、E、G...符号代表BorderBox1、BorderBox10、BorderBox11...组件名称exportdefault{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);});}}