<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div id="app">
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
    <mycpn1></mycpn1><!--使用自定义的组件名称-->
</div>
<body>
<!--1 script标签，注意类型必须是:text/x-template-->
<script type="text/x-template" id="cpn">
    <div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>
</script>

<!--2template标签-->
<template id="cpn1">
    <div><h2>我是标题1</h2><p>我是内容</p><p>我是安徽</p></div>
</template>


<script src="vue.js"></script>
<script>
    //全局注册的语法糖的实现
    Vue.component("mycpn1",{
        template:'#cpn1'
    });


    const app=new Vue({         /*看成root组件*/
        el:'#app',
        data:{
        },
        components:{
        }
    })
</script>
</body>
</html>