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:XERROR in ./src/main.ts 12:0-41Module 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-41Module not found: Error: Can't resolve '@dataview/datav-vue3' in 'E:\Work\VSCodeTest\training\test\vue-test\src'ERROR in src/main.ts:15:9TS2769: No overload matches this call.  Overload 1 of 2, '(plugin: Plugin_2, options_0: { classNamePrefix: string; }): App', 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'.      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, options_0: { classNamePrefix: string; }) => any; }'.  Overload 2 of 2, '(plugin: Plugin_2, options: { classNamePrefix: string; }): App', 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'.      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, 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. 按需引入

  BorderBox1import { BorderBox1 } from '@dataview/datav-vue3';export default {  components: {BorderBox1},};

报错

Compiled with problems:XERROR 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-50Module 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';

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...组件名称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);});  }}

（）