看了之前元件的實作範例，將樣板內容以字串形式在template屬性中撰寫很不容易閱讀，因此Vue提供了單一檔案元件SFC（Single File Component）的檔案格式，可以讓元件程式碼能拆分成獨立檔案。
格式：

<template>
    <div>
        <!--HTML-->
    </div>
</template>

<script>
    //JavaScript
</script>

<style>
    /*CSS*/
</style>

一個SFC是一個vue檔案(.vue)，每個vue檔案是一個完整的元件，
分成三個部分：

1. HTML
2. JavaScript
3. CSS

詳談SFC template

SFC裡的template裡是當我們在註冊全域元件時會輸入的字串，一個template只能有一個根元素（root element）。

<template>
    <div>
       
    </div>
</template>

詳談SFC script

一個SFC裡只能有一個script區塊，script裡的內容和之前範例裡有的東西差不多，可以有屬性、方法或是hook function，如果要引入外部資料(js檔)需要用到import或require。

import{helper}from'../myVue.js' //以相對路徑引入自己專案的js檔

<script>
export default{
    name:'元件名稱',
    props:'元件屬性定義(Array/Object)',
    data(){
        return{
            //元件內部資料
        };
    },
    methods:{},
    computed:{},
    watch(){}
};
</script>

詳談SFC style

一個SFC裡可以有多個style，而預設的style是全域管理，如果想要變成局部，可以使用以下語法：

<style scoped>

</style>

SFC中使用其他元件

SFC中也可以加入其他SFC，舉例：現在有兩個SFC分別為A和B，我們想要在A中使用B，方法如下：

<!--A.vue-->
<template>
    <div>
        <p>This is component A.</p>
        <!--使用B.vue-->
        <B></B>
    </div>
</template>

<script>
    import B from './B.vue'; //引入B.vue
    export default{
        components:{
            B //註冊B.vue，使它可以在A.vue中使用
        },
    }
</script>

使用import引入B.vue，並將B加入components屬性，最後在A.vue的模板中使用<B></B>。