使用vue-property-decorator解构的Component和Vue使用报错

发布于 2022-09-13 00:46:10 字数 974 浏览 19 评论 0

<template>
    <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
        <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />

        <el-avatar shape="circle" :size="100" :src="logo"></el-avatar>
    </div>
</template>

<script lang="ts">
// import { Options, Vue } from "vue-class-component";
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src

@Component({
    components: {
        HelloWorld,
    },
})
export default class Home extends Vue {
    logo = require("../assets/logo.png");

    mounted(): void {
        console.log("mounted");
    }
}
</script>

截屏2021-07-24 下午3.11.06.png截屏2021-07-24 下午3.11.39.png
请问各位大佬,这个是什么问题?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

独闯女儿国 2022-09-20 00:46:10

由于 vue-class-component 升级了,原先引入的 Compenots 变成了现在的Options但是vue-property-decorator的源码并未同步更新,所以在用时就会报错;

解决

提示报错后,在node_modules/vue-property-decorator/bin/index.js找到, 把前面几行代码改成这样就行

// import Vue from 'vue';
import { Options, mixins, Vue } from 'vue-class-component';
export { Options, Vue, mixins as Mixins };

可以尝试下,这个是网上找的

引用地址是 https://blog.csdn.net/HockJer...

我是没有成功,看你了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文