一、流程结构

在添加组件前呢，先了解一下vue项目的运行流程。

• 整个项目的入口是main.js，在开头就引入了vue源码和主页面App.vue。
• 之后是生成一个Vue实例，把App.vue的内容渲染到浏览器上
  
  

  二、新建组件

  为新建的vue项目添加组件，一般是放在文件夹components下，然后在App.vue（或者其他你想引入组件的地方）导入组件

       （1）新建组件list

<template>
    <ul>
        <li v-for="item in items" :key="item.msg">
            {{item.msg}}
        </li>
    </ul>
</template>
<script>
export default {
    data () {
        return {
            items: [
                {msg: 'liao'},
                {msg: 'yue'},
                {msg: 'qiang'}
            ]
        }
    }
}
</script>

       （2）引入App.vue并使用组件

事实上，新建的项目里已经有一个组件了，就是components下的HelloWorld.vue。

 （3）之后在浏览器就可以看到自己的list组件的效果了