黑马苍穹外卖前端求解

Question

前端可以正常启动 但是代码很多都爆红什么原因
主要的错误是这两个 求解？

Answer 1

引自免费微信小程序：皆我百晓生

根据您提供的两个截图，我发现了几个可能导致错误的原因。以下是针对每个错误的解决建议：

错误1： 这个错误出现在index.vue文件中的第6行，报错信息提示说“作为表达式调用时，无法解析类修饰器的签名”。

错误原因： 看起来是由于你在使用Vue.js的装饰器语法时，可能对装饰器的使用方式有些误解。@Component装饰器通常用于定义一个Vue组件，它期望接收一个包含选项的对象作为参数。

解决方案： 确保你正确地使用了@Component装饰器，并且传递了一个对象作为参数。例如：

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  name: 'Hamburger',
  // 如果有其他组件选项，比如生命周期钩子、数据、方法等，可以添加在这里
})
export default class extends Vue {
  @Prop({ default: false }) private gopack!: boolean;
  @Prop({ default: false }) private butlist!: boolean;
  @Prop({ default: '集团管理(A)' }) private title!: string;

  goBack() {
    // 这里实现goBack方法
  }
}
</script>

错误2： 这个错误出现在index.vue文件中的第32行，报错信息提示“属性‘goBack’为私有属性，只能在类‘default’中访问。”

错误原因： 这表明你在模板中尝试访问了一个私有方法（goBack()），但在Vue中，为了能从模板中访问方法，它们必须被标记为公共的（public）或者保护的（protected）。

解决方案： 将goBack()方法的访问修饰符更改为public，然后在模板中调用它。例如：

<script lang="ts">
// ... 其他导入和组件定义 ...

export default class extends Vue {
  // ... 其他Prop注解 ...

  public goBack() {
    // 这里实现goBack方法
  }
}
</script>

<!-- 在模板中 -->
<span v-if="gopack" @click="goBack()">
  <img src="@/assets/icons/[e-mail]" alt="" />
  返回
</span>

请按照上述修改尝试修复代码，如果你还有其他疑问或遇到新的问题，请随时告诉我。