0 引言

今天，博主在学习vue+elementui的时候遇到一个问题，卡了博主很久。

1 问题复现

在vue页面的<template>标签中写入两个<div>标签，

<template>
    <div>
        <h1>第一个div标签</h1>
        <el-table></el-table>
    </div>
    <div>
        <el-pagination
            background
            layout="sizes,prev, pager, next,jumper"
            :total="1000">
        </el-pagination>
    </div>
</template>

<script>
    export default{
        
    }
</script>

<style>

</style>

 然后启动vue服务器卡死，启动不了

2 问题解决

把<template>标签中的<div>删去一个就行了，

<template>
    <div>
        <h1>第一个div标签</h1>
        <el-table></el-table>
    <!-- </div>
    <div> -->
        <el-pagination
            background
            layout="sizes,prev, pager, next,jumper"
            :total="1000">
        </el-pagination>
    </div>
</template>

<script>
    export default{

    }
</script>

<style>

</style>

vue服务器启动成功，

 3 问题分析

报错中显示，template根节点有且仅有一个元素。

因此，不可以在template中写两个div元素。

4 参考

为什么template必须有且只能有一个div呢？