Vue 2 提取可复用 Footer 组件

        面对单页面的时候 ，关于footer可以简单一点，直接写到当前页面<template>的中，例如下图就可以实现简单的效果：

        但是，当页面变多的时候，这段代码就要复制很多次，放到不同的页面底下，于是可以将footer单独提取出来，形成一个footer组件，方便后期维护。代码实现如下，并引用了计算属性，程序自动获取时间，自动更新：

<template>
  <footer class="footer">
    <p>&copy; {{ currentYear }} 供应商产品管理系统 V1.0.1</p>
  </footer>
</template>

<script>
export default {
  computed: {
    currentYear() {
      return new Date().getFullYear();
    }
  }
};
</script>

<style scoped>
.footer {
  margin-top: 20px;
  font-size: 15px;
  color: #666;
}
</style>

然后就可以在别的组件中进行引用调用了：

<template>
    <Footer />
  </div>
</template>

<script>
export default {
  components: {
    Footer
  },
  data() {
    return {
......}}}