vue学习笔记19-组件嵌套关系

组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构

这和我们嵌套HTML元素的方法类似，vue实现了自己的组件模型，使我们可以在每个组件内封装自定义内容和逻辑

老样子先单独创建一个项目详情见学习笔记1，有一说一cnpm install真的很好用！！！！！！！！

几秒的响应速度这不比npm install创建半小时香吗

https://mbd.baidu.com/ug_share/mbox/4a83aa9e65/share?product=smartapp&tk=1a9aebdaa81be97cd1d9517931e2d9e2&share_url=https%3A%2F%2Fyebd1h.smartapps.cn%2Fpages%2Fblog%2Findex%3FblogId%3D118885527%26_swebfr%3D1%26_swebFromHost%3Dbaiduboxapp&domain=mbd.baidu.com

这个博主的安装教程超级不错，简短且精确

Header组件

<template>
    <h3>Header</h3>
</template>

<style scoped>
h3{
    width:100%;
    height:100px;
    border:5px solied #0d0c0c;
    text-align:center;
    line-height:100px;
    box-sizing:border-box;
}

</style>

问题？？？

我的背景为什么是黑色的➡️将main.js中的import './assets/main.css'删除（ps:同时使组件居中）

我的边框为啥没有颜色？

 选中能看到有个框，但页面没颜色

 Main组件

<template>
    <div class="main">
        <h3>Main</h3>
    </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.main{
    float:left;
    width:70%;
    height:600px;
    border:5px solied #999;
    text-align:center;
    box-sizing:border-box;
}

</style>

好的我今天出大问题了！！！！！！！

我的所有组件加载出来是空白的且报错why➡️hh忘记刷新了

但问题又来了我的main也没有边框

 Aside

<template>
    <div class="aside">
        <h3>Aside</h3>
    </div>
 </template>
<script>
export default {
    
}
</script>

<style scoped>
.aside{
    float:right;
    width:30%;
    height:600px;
    border:5px solied #999;
    box-sizing:border-box;
    border-top:0;
    border-left:0;
}

</style>

Aticle

<template>
    <h3>
        Article
    </h3>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.main{
    width:80%;
    margin:0 auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 50px;
    background: #999;
    
}

</style>

Item

<template>
    <h3>
        Item
    </h3>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.main{
    width:80%;
    margin:0 auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 10px;
    background: #999;
    
}

还是挺感动至少这次重要有一个算是有边框了，还有就是import引入时，系统自动会在后面加一个；有没有都没有影响目前来说（有可能是报错原因）