关于Vue项目不报错但是不显示组件的问题(原因之一)

在解决这个问题之前(不管是不是跟我原因一样)请先安装vue-devtools,安装方法：传送门

首先是项目代码：

<template>
    <div>首页区域</div>
</template>

<script>

</script>

<style lang="scss" scoped>

</style>

按照道理来说，如果代码没有问题，最后在页面上会出现“首页区域”四个字

但是结果如下：

但是结果是既没有报错也没有出现想要的效果，代码也检查了很多遍，是没问题的，这时候如果你不装vue-devtools 调试器，就很难找出问题。

 

安装vue-devtools后：

可以看到首页区域的高度比顶部搜索栏区域的高度要低，这是首页区域就被挡住了。

解决办法：为首页区域添加margin-top:100px；

最终效果图：

这时候首页区域就出来了。

 

总结：一定要安装vue-devtools(ps：自己比较懒，所以没有第一时间安装，导致浪费了好多时间0.0)