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