<!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>
原文：https://www.cnblogs.com/Damocless/p/11913942.html