使用vue-cli搭建Helloworld工程

把vue-cli初始化的项目中的src目录下的文件全部删除掉，新建App.vue

<template>
  <div>
    <img src="./assets/logo.jpg" height="74" width="216"/>
    <!--使用组件-->
    <hello-world></hello-world>
  </div>
</template>

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

<style scoped>

</style>

新建components目录，在该目录下新建HelloWorld.vue文件

<template>
  <div>
    <p class="info">{{info}}</p>
  </div>
</template>
<script>
    export default {
        name: 'HelloWorld',
        data(){  // 组件里必须写函数
            return {
                info: 'Vue大爷 你好！'
            }
        }
    }
</script>

<style scoped>
  .info{
    color: red;
    font-size: 20px;
  }
</style>

新建main.js，引入Vue和App

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

在src下新建assets目录，在该目录下放一张logo.jpg图片
工程架构如下：

运行效果如下：