为什么我的 vue3 无法使用 vue-class-component
Why my vue3 could not work with vue-class-component
<script>
import * as Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
//my operation
}
</script>
这是 'vue-class-component' 的一个简单示例。
但是，当我运行我的项目时，浏览器显示这样的错误信息：
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' 版本有什么问题吗？我该怎么办……
Vue3 不支持组件。因此，您可以使用选项代替组件，如果有任何组件，您可以在选项中定义它们。我也遇到了同样的问题，所以我尝试从 vue-class-component 导入 Vue，因为这里 Vue 被声明为 Vue Constructor 并导出它。
<script>
import {Vue,Options} from 'vue-class-component'
@Options({
components: {}
})
export default class HelloWorld extends Vue {
//my operation
}
</script>
<script>
import * as Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class HelloWorld extends Vue {
//my operation
}
</script>
这是 'vue-class-component' 的一个简单示例。 但是，当我运行我的项目时，浏览器显示这样的错误信息：
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' 版本有什么问题吗？我该怎么办……
Vue3 不支持组件。因此，您可以使用选项代替组件，如果有任何组件，您可以在选项中定义它们。我也遇到了同样的问题，所以我尝试从 vue-class-component 导入 Vue，因为这里 Vue 被声明为 Vue Constructor 并导出它。
<script>
import {Vue,Options} from 'vue-class-component'
@Options({
components: {}
})
export default class HelloWorld extends Vue {
//my operation
}
</script>