<script>
import * as Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
//my operation
}
</script>
这是“vue类组件”的一个简单示例。但是,当我运行项目时,浏览器会显示这样的错误信息:
Uncaught TypeError: Class extends value #<Object> is not a constructor or null
at eval (HelloWorld.vue?e90b:39:1)
at Module../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:19:1)
at __webpack_require__ (app.js:315:33)
at fn (app.js:570:21)
at eval (HelloWorld.vue?vue&type=script&lang=js:5:213)
at Module../src/components/HelloWorld.vue?vue&type=script&lang=js (app.js:162:1)
at __webpack_require__ (app.js:315:33)
at fn (app.js:570:21)
at eval (HelloWorld.vue:3:97)
at Module../src/components/HelloWorld.vue (app.js:140:1)
为什么会发生这种情况? cmd还显示了这样的警告:
in ./node_modules/vue-class-component/dist/vue-class-component.esm.js
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static, Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defineExpose, defineProps, defineSSRCustomElement, devtools, effect, effectScope, getCurrentInstance, getCurrentScope, getTransitionRawChildren, guardReactiveProps, h, handleError, hydrate, initCustomFormatter, initDirectivesForSSR, inject, isMemoSame, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isShallow, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, stop, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, watchPostEffect, watchSyncEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withMemo, withModifiers, withScopeId)
我很困惑,这和我的版本关于“vue-class-component”有什么问题吗?我该怎么做…
发布于 2022-03-25 02:44:17
组件不支持Vue3。因此,您可以使用选项而不是组件,如果有任何组件,您可以在选项中定义它们。我也面临同样的问题,所以我尝试从Vue类组件导入Vue,因为这里Vue被声明为Vue构造函数并导出它。
<script>
import {Vue,Options} from 'vue-class-component'
@Options({
components: {}
})
export default class HelloWorld extends Vue {
//my operation
}
</script>
https://stackoverflow.com/questions/71396285
复制相似问题