VUE配置组件

VUE组件的配置/使用方法，和VUE配置路由可以一起看，分清两者的区别。
VUE的一大特色就是组件复用，写代码的时候封装好组件是一个很好的习惯，一来省时省力，二来后期维护也很方便。
适用场景：比如一个头部置顶的导航栏，预计在一个项目的很多页面都要使用，就可以将它封装为组件（components中），多次调用。

步骤以导航栏为例：
1.在components中创建导航栏文件the-header.vue
2.在the-header.vue里面输入导航内容。（这里只是举个例子方便看，拿element组件快速创建）

<template>
<div> //注意，一个template模板里只允许有一个大div，所以我习惯会先写一个div全包裹起手
    <el-header class="navbar navbar-default navbar-fixed-top">
        <div class="toright1">
            <el-menu class="theselect" :default-active="activeIndex" mode="horizontal" @select="handleSelect">
                <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
                <el-menu-item index="2"><router-link to="/" tag="span">例子1</router-link></el-menu-item>
                <el-menu-item index="3"><router-link to="/" tag="span">例子2</router-link></el-menu-item>
                <el-menu-item index="4"><router-link to="/" tag="span">例子3</router-link></el-menu-item>
                <el-menu-item index="4"><router-link to="/" tag="span">例子4</router-link></el-menu-item>
            </el-menu>
        </div>
    </el-header>
</div>
</template>

3.在the-header.vue中导出组件

<script>
export default ({ //导出
    name:'TheHeader', //注意，这里最好用这种驼峰命名法，不要用一个单词之类的，组件名设置不当会无法正常显示，而且不报错
    data() {
      return {
        activeIndex: '1', //设置导航栏默认指index=1那条，不用管
      };
    },
})
</script>

4.在需要使用组件的界面，导入组件（这里以home首页为例）
首页其他都正常编写，然后在script中导入（3步，缺一不可）

<script>
import TheHeader from '../components/the-header.vue' //1.从路径导入
export default {
  name: 'Home',
  components: { //2.组件绑定，注意是components，这个s不要漏
    TheHeader, //3.把导入的TheHeader 绑定进来，正式成为组件，这个就是组件名
  }
}
</script>

5.组件导入成功，在home首页使用，放到你想放的位置

<TheHeader />
<TheHeader ></TheHeader >
//这两种写法一样的，over