vue组件

组件：局部功能界面，包含所有实现页面的所有资源
HelloWorld.vue：

<template>
  <div>
    <p class="msg">{{msg}}</p>
  </div>
</template>

<script>
  export default { //配置对象（与vue一致）
    data(){ //在组件中必须写函数
      return{
        msg:'hello Vue Component'
      }
    }
  }
</script>

<style>
  .msg{
    color: red;
    font-size: 30px;
  }
</style>

App.vue:

<template>
  <div>
    <img class="logo" src="./assets/logo.png" alt="">
    <!--3.使用组件标签-->
    <HelloWorld></HelloWorld>
  </div>
</template>

<script>
  //1.  引入组件
  import HelloWorld from './components/HelloWorld'
  export default {
    //2.映射组件标签
    components:{
      HelloWorld
    }
  }
</script>

<style>
  .logo{
    width: 200px;
    height: 200px;
  }
</style>

main.js:

/*
  入口JS：创建Vue实例
*/
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el:'#app',
  components:{
    App
  },
  template:'<App/>'
})