Vue基于脚手架编写项目

**1.**创建副组件HelloWorld在compoments包下

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

<script>
  export default {
    data(){
      return{
        msg:'HelloWorld'
      }
    }
  }

</script>

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

2.创建主组件App.vue

<template>
  <div>
    [外链图片转存失败(img-6ApWt1DC-1562225993690)(https://mp.csdn.net/mdeditor/assets/logo.png)]
    <!--  3.使用标签-->
    <HelloWorld/>
  </div>
</template>

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

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

3.创建入口js

<template>
  <div>
    [外链图片转存失败(img-scNpUSbW-1562226036931)(https://mp.csdn.net/mdeditor/assets/logo.png)]
    <!--  3.使用标签-->
    <HelloWorld/>
  </div>
</template>

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

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