探究
这就能够解释为什么main.js中导入后index.html中的div消失了。子组件代替父组件就是在父组件中添加template之后会出现的现象。为了一探究竟，我自己创建父子组件：
实战
// 导入vue.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="./vue.js"></script>
</head>
<body>
<div id="father">
我是父组件
</div>
<template id="child">
<h2>我是子组件</h2>
</template>
<script>
new Vue({
el:'#father', // 挂载管理的元素
template: '#child'
});
</script>
</body>
</html>
结果
运行截图：
结论
结论：template标签在main.js中调用之后，会使得App.vue组件中的内容代替index.html中的内容，因此在index.js中的一切样式均不会生效。不应再index.html中添加任何代码。
参考
参考：https://blog.csdn.net/yudiandemingzi/article/details/80247137
庄周晓梦迷蝴蝶，望帝春心托杜鹃。——李商隐