Article Directory
Explore
This can explain why the div in index.html disappeared after import in main.js. The replacement of the parent component by the child component is a phenomenon that will occur after the template is added to the parent component. In order to find out, I created the parent-child component myself:
Actual combat
// 导入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>
result
Run screenshot:
in conclusion
Conclusion: After the template tag is called in main.js, the content in the App.vue component will replace the content in index.html, so all styles in index.js will not take effect. No more code should be added to index.html.
reference
Reference: https://blog.csdn.net/yudiandemingzi/article/details/80247137
Zhuang Zhouxiao dreams of butterflies, and Wang Dichun cares for the cuckoo. ——Li Shangyin