vue使用脚手架vue-cli创建并引入自定义组件

<template>
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>

// 1、export 表示导出,在自定义组件里面使用export default导出  
export default {
    // name 表示设置别名，可以不设置，建议和组件的名称一致
    name:"First",
    data(){
        return{
            msg:"First Vue"
        }
    }
}
</script>

// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"

// 2、添加自定义组件
  components:{
    First
  }

<template>
  <div id="app">
    <img src="./assets/loGo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"
export default {
  name: 'App',
  // 2、添加自定义组件
  components:{
    First
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -WEBkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
    <div>
        <h1>{{secondMsg}}</h1>
    </div>
</template>

<script>
export default {
    // name 表示设置别名，可以不设置，建议和组件的名称一致
    name :"Second",
    data(){
       return{
           secondMsg:"Second vue"
       }
    }
}
</script>

<template>
    <div>
        <h1>{{msg}}</h1>
        <!--3、引用second.vue组件-->
        <Second></Second>
    </div>
</template>
<script>
// 1、使用import导入Second.vue
import Second from './Second';
// export 表示导出
export default {
    // name 表示设置别名，可以不设置，建议和组件的名称一致
    name:"First",
    data(){
        return{
            msg:"First Vue"
        }
    },
    // 2、添加自定义组件组件
    components:{
        Second
    }
}
</script>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"
export default {
  name: 'App',
  // 2、添加自定义组件
  components:{
    First
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>