1.全局注册组件

main.js
全局注册组件后，在任何地方都可以直接使用

import Header from "./components/Header";
import Footer from "./components/Footer";
import Content from "./components/Content";

Vue.component("Header", Header)
Vue.component("Footer", Footer)
Vue.component("Content", Content)

components-->Header.vue

<template>
  <div class="header">
    <h1>Header</h1>
  </div>
</template>
<style scoped>
.header {
  text-align: center;
  background: #30b031;
  padding: 0;
}
</style>

components-->Content.vue

<template>
  <div class="content">
    <h2>title</h2>
    <p>content</p>
  </div>
</template>
<style scoped>
.content {
  text-align: center;
  background: #f5c700;
  padding: 0;
}
</style>

components-->Footer

<template>
  <div class="footer">
    <h1>Footer</h1>
  </div>
</template>
<style scoped>
.footer {
  text-align: center;
  background: #f34a37;
  padding: 0;
}
</style>

App.vue

<template>
  <div id="app">
    <Header />
    <Content />
    <Footer />
  </div>
</template>

效果图:

image.png

2.局部注册

Header、Content、Footer
不变

main.js
删除全局注册代码

App.vue
这里将组件注册到App.vue中，只能App.vue中使用

<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
import Content from "./components/Content";

export default {
  name: "app",
  components: {
    Header,
    Footer,
    Content
  }
};
</script>

效果与上述相同