SPA：單頁應用(Single Page App),具體好處,百度搜索

我們可以想象一個場景，有兩個頁面,每個頁面的頭部都有一張 Logo 圖片.如果每次都寫成原始 HTML 的話,代碼就會重復.

    // 頁面1的代碼如下:<div class='logo'><img src='url'> </div>// 頁面2的代碼如下:<div class='logo'><img src='url'></div>

因此，我們可以把這段代碼抽取出來成為一個新的組件(component)

// 創建一個新的組件 (存放在/src/components/Logo.vue)
<template><div class='logo'><img src='url'></div>
</template>

在頁面中引用組件

<template><div><my-logo></my-logo>   <!-- 對應MyLogo -->...</div>
</template><script>
import MyLogo from '@/components/Logo'export default {...components: {MyLogo}
}
</script>
雖然上面代碼中定義的組件名字為MyLogo，但是在<template/ > 中使用時需要寫為 <my-logo ></ my-logo>

參考 《Vue.js快速入門》 P106