首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为什么我的vue3不能使用vue类组件?

为什么我的vue3不能使用vue类组件?
EN

Stack Overflow用户
提问于 2022-03-08 14:00:19
回答 1查看 2.2K关注 0票数 1
代码语言:javascript
运行
复制
<script>
 import * as Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  //my operation
}

</script>

这是“vue类组件”的一个简单示例。但是,当我运行项目时,浏览器会显示这样的错误信息:

代码语言:javascript
运行
复制
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还显示了这样的警告:

代码语言:javascript
运行
复制
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”有什么问题吗?我该怎么做…

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-25 02:44:17

组件不支持Vue3。因此,您可以使用选项而不是组件,如果有任何组件,您可以在选项中定义它们。我也面临同样的问题,所以我尝试从Vue类组件导入Vue,因为这里Vue被声明为Vue构造函数并导出它。

代码语言:javascript
运行
复制
<script>

import {Vue,Options} from 'vue-class-component'
@Options({
    components: {}
})
export default class HelloWorld extends Vue {
  //my operation
}

</script>
票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71396285

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档