用vue构建项目笔记2（引入自定义头部组件）

     当我们创建好项目以后，前端的工作就是开始切图了，头部导航和尾部导航以及最底部的网站声明都是每个网页必备的，不可能每个网页去写一遍，

用iframe或者load方法去加载，都有非常大的弊端，在vue中，可以用组件功能方便的实现这一需求。下面是我项目中创建头部的过程：

1、找到vue-cli项目中src/components目录，创建文件header.vue。

2、在header.vue中的<template></template>中编写头部代码。

3、在其他页面中引用：

在script标签中写入import topBar from "@/components/common/header"  //引入header组件

export default {
data (){
return{}
},
components:{
topBar    //注册该组件
}
}

然后在页面中任意位置加入<topBar></topBar>即可引入头部组件