可以将通用或者公用的页面模块抽取成vue组件，在vue实例中引用。
在页面中可以如下实验组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
使用组件
<counter></counter>
</div>
<script>
//定义组件
const counter = {
template:"<button @click='num++'>你点击了{{num}}次</button>",
data(){
return {num:0};
}
}
//全局注册组件：在所有的vue实例中都可以使用组件
//参数1：组件名，参数2：具体的组件
// Vue.component("counter", counter);
var app = new Vue({
el:"#app",
components:{
counter: counter
}
});
</script>
</body>
</html>组件使用场景：在项目需要重用某个模块（头部，尾部，新闻。。。）的时候，可以将模块抽取成组件，其他页面中注册组件并使用。
- 全局注册：在任何vue实例中都可以引用，如：一般网站的头部导航菜单
- 局部注册：可以在有需要的页面引入组件，如：商城网站首页中各种活动模块
