如何在vue中实现组件化开发

</div>
<!-- 模板分离 方法一、 -->
<script type="text/x-template" id="cpn5">
    <div>
        <h1>标题5</h1>
        <p>内容5， 我是哈哈哈</p>
        <p>内容5：我是呵呵呵</p>
    </div>
</script>
<!-- 模板分离 方法二 -->
<template id="cpn6">
    <div>
    <h1>标题6</h1>
    <h1>{{title}}</h1>
    <p>内容6，我是哈哈哈</p>
    <p>内容6我是呵呵呵</p>
</div>
</template>

<script>
    // 1.创建组件化
    // 子组件
    const cpnC = Vue.extend({
        template: `
        <div>
            <h1>标题</h1>
            <p>内容， 我是哈哈哈</p>
            <p>内容：我是呵呵呵</p>
         </div>`
    });

    // 1.创建组件化
    // 父组件
    const cpnC2 = Vue.extend({
        template: `
        <div>
            <h1>标题2</h1>
            <p>内容2， 我是哈哈哈</p>
            <p>内容2：我是呵呵呵</p>
            <cpn1></cpn1>
         </div>`,
        components: {
            cpn1: cpnC

        }
    });

    // 全局组件：可以在所有的实例里面使用
    // 2.注册组件化，并且定义组件标签名称
    // vue.component('定义使用名称','创建名称')
    Vue.component('my-cpn', cpnC)

    // 全局  注册组件的语法糖写法
    Vue.component('cpn3', {
        template: `
        <div>
            <h1>标题3</h1>
            <p>内容3， 我是哈哈哈</p>
            <p>内容3：我是呵呵呵</p>
         </div>`
    })

    // 模板分离 方法一
    Vue.component('cpn5', {
            template: `#cpn5`

        })
        // 模板分离 方法二
    Vue.component('cpn6', {
        template: '#cpn6',
        data() {
            return {
                title: 'abc'
            }
        }

    })

    const app = new Vue({
        el: "#app",
        data: {

        },
        methods: {

        },
        computed: {

        },
        // 局部组件:只能在控制的vue实例里面使用
        components: {
            cpn: cpnC,
            cpn2: cpnC2,
            cpn4: {
                template: `
        <div>
            <h1>标题4</h1>
            <p>内容4， 我是哈哈哈</p>
            <p>内容4：我是呵呵呵</p>
         </div>`
            },

        },


    })
</script>