如何将Vue组件与分离的文件一起使用？(TS/HTML/SCSS)

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Welcome to my Vue component",
      description: "This is a demo component",
    };
  },
  methods: {
    handleClick() {
      alert("Button clicked");
    },
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

<template>
  <div>
    <component-name></component-name>
  </div>
</template>

<script>
import ComponentName from "@/components/Component.vue";

export default {
  components: {
    ComponentName,
  },
};
</script>

<script>
import ComponentName from "@/components/Component.vue.html";
import "@/components/Component.vue.scss";

export default {
  components: {
    ComponentName,
  },
};
</script>

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<style scoped>
h1 {
  color: blue;
}
</style>