Vue 關注點分離導致無法掛載組件：模板或渲染函數未定義

Question

我是 vue 新手，並試圖將我的 ts/scss 與主 vue 文件分開。 我正在使用風格指南中所述的 kebab-casing，因為它對我來說很熟悉：

https://v2.vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended

這是我的 app.vue：

<template>
  <div id="app">
    <the-header @onExpanded="setExpanded($event)" />
    <router-view />
    <the-footer />
  </div>
</template>

<script src="./app.ts" lang="ts"></script>
<style src="./app.scss" lang="scss"></style>

如您所見，我包括了我的app.ts和app.scss 。 在我的 TypeScript 文件中，我有這個：

import { defineComponent, ref } from "@vue/composition-api";
import { useQuery, useResult } from "@vue/apollo-composable";

import * as pageCollection from "@/graphql/query.pages.gql";
import TheFooter from "@/components/layout/the-footer/the-footer";
import TheHeader from "@/components/layout/the-header/the-header";

export default defineComponent({
  name: "App",
  components: { TheFooter, TheHeader },
  setup() {
    const expanded = ref(false);
    const { result } = useQuery(pageCollection);
    const pages = useResult(result, null, (data) => data.pageCollection);

    return { expanded, pages };
  },
  methods: {
    setExpanded(value: boolean) {
      this.expanded = value;
      console.log(this.expanded);
    },
  },
});

在這里，我試圖包括我的頁眉和頁腳。 我的文件夾結構如下所示（帶有部分 the-header.vue）：

這是我的標題 TypeScript：

import { defineComponent, ref } from "@vue/composition-api";

export default defineComponent({
  name: "TheHeader",
  setup() {
    const isExpanded = ref(false);

    return { isExpanded };
  },
  data() {
    return {
      isExpanded: false,
    };
  },
  emits: ["onExpanded"],
  methods: {
    expand() {
      this.isExpanded = !this.isExpanded;
      this.$emit("onExpanded", this.isExpanded);
    },
  },
});

問題是，當我嘗試運行應用程序時。 我收到此錯誤：

底部的控制台日志實際上來自我的頁腳，它告訴我它正在找到該組件。 為了讓組件渲染，我還需要做些什么嗎？

Answer 1

它是app.ts中的導入，目前是：

import TheFooter from "@/components/layout/the-footer/the-footer";
import TheHeader from "@/components/layout/the-header/the-header";

鄰接應該是：

import TheFooter from "@/components/layout/the-footer/the-footer.vue";
import TheHeader from "@/components/layout/the-header/the-header.vue";