vue --- >SPA模式的组件

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