目标：将页面划分为几个功能块，然后进行组合，目的是实现更好的代码复用，
Vue的组件化思想：独立，可复用。任何应用都会被抽象成为一个组件树；树形结构
组件的使用分为是三个步骤
1创建组件构造器
Vue.extend({})
2注册组件
Vue.conponent
3使用组件
在Vue的实例范围之内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<my-cpn></my-cpn><!--使用自定义的组件名称-->
</div>
<body>
<script src="vue.js"></script>
<script>
// 1创建一个组件构造器对象
const cpn=Vue.extend({
template:'<div><h2>我是标题</h2><p>我是内容</p><p>我是安徽</p></div>'
});
//2注册组件 (自定义标签名字，组件构造器)；
Vue.component("my-cpn",cpn);
//3必须要在组件的范围之内使用
const app=new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
全局组件 和 局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="app">
<mycpn></mycpn><!--使用自定义的组件名称-->
<mycpn></mycpn><!--使用自定义的组件名称-->
<mycpn></mycpn><!--使用自定义的组件名称-->
</div>
<body>
<script src="vue.js"></script>
<script>
// 1创建一个组件构造器对象
const cpn=Vue.extend({
template:'<div><h2>我是标题</h2><p>我是内容</p><p>我是安徽</p></div>'
});
//2注册组件（全局组件，意味着可以在多个Vue的实例中使用） (自定义名字，组件)；
//在某个Vue的实例下注册，得到的是局部组件
// Vue.component("my-cpn",cpn);
const app=new Vue({
el:'#app',
data:{
},
components:{
// cpn是使用组件是的标签名
mycpn: cpn
}
})
</script>
</body>
</html>