一、组件（vue文件）的结构

<!--页面模板-->
<template>
  <div> {{msg}}</div>
</template>
<!--JS 模块对象-->
<script>
  export default {
    data () {
      return {msg: 'vue模板页'}
    }
  }
</script>
<!--css样式-->
<style>
</style>

二、组件的基本使用

1. 引入组件
2. 映射成标签
3. 使用组件标签

<template>
  <!--3.使用组件标签-->
  <HelloWorld/>
</template>
<script>
  //1.引入组件
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    //2.映射组件标签
    components: {
      HelloWorld
    }
  }
</script>