vue2.0入手踩的第二个坑-组件

1：浏览器报错
Component template requires a root element, rather than just text.

浏览器报错.png

分析图中位置：带大家怎么查看分析错误。

位置1：错误类型--从大的方向锁定。--模板编译出错。肯定锁定了是".vue"类型的文件出了问题。
位置2：错误的精准位置（文件内某处）--在“app content”处
位置3：错误原因--组件模板要求是一个元素，而不是文本。所以我们解决原则：要给组件外层裹上一个标签。
位置4：发生错误的文件

2：源码
错误的：

<template>
  app content
</template>

修正后：

<template>
<div class="appContent">app content</div>
</template>

完整代码：

<template>
<div class="appContent">app content</div>
</template>

<script>
    export default {

        // 组件的名称
        name: 'appContent',

        // props 可以是数组或对象，用于接收来自父组件的数据
        props: {},

        // 数据绑定
        data() {
            return {}
        },

    }

</script>

<style>

</style>

3：原因：

 在每个组件模板(.vue文件)，不在支持片段代码
    组件中模板:
        之前:
            <template>
                <h3>我是组件</h3>
            </template>
        现在:  必须有根元素，包裹住所有的代码
            <template id="aaa">
                    <div>
                        <h3>我是组件</h3>
                    </div>
            </template>

4：小结
到了2.0有很多变化的地方，从1.x过来的人要注意。