安裝

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配置文件添加相應(yīng)方法

文件：@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);
	});
  }
}

總結(jié)

到此這篇關(guān)于Vue3安裝dataV報錯問題解決方案的文章就介紹到這了,更多相關(guān)Vue3安裝dataV報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論