Vue.jsのSFCでscript、template、styleを別ファイルにする

結論

1. ディレクトリ名をコンポーネント名にする（例：SampleComponent）
2. 1. のディレクトリ内にindex.vue、template.html。style.cssをそれぞれ配置する
3. index.vueの内容を以下の様にする

@/components/SampleComponent/index.vue

<script>
// ここにスクリプトコードを書いていく
import { defineComponent } from "vue";

export default defineComponent({
    name: "sample-component", //<- 必須
});
</script>

<template src="./template.html"></template> 

<style src="./style.css" scoped></style>

App.vue

<template>
    <SampleComponent />
</template>

<script>
import { defineComponent } from "vue";
import SampleComponent from "@/components/SampleComponent"

export default defineComponent({
    components: { SampleComponent },
});
</script>

参考

ディレクトリ構造

• 📂src
  • App.vue
  • 📂components
    • 📂SampleComponent
      • index.vue
      • template.html
      • style.css

※SFCじゃなくなってるっつーツッコミは無しで。

了