---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

因为前面已经有很多vue了,这次是新建了一个third下的新项目.老样子做一些处理
去掉vue自带的默认的css样式,并且删掉原来的vue,把app.vue清空

VUE的自带组件结构

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

---

新建文件搭建结构

在src下新建page文件夹,创建上图中的文件

  <Header />
  <Main />
  <Aside />
  <Item />
  <Article />

app与Main Header Aside结构

在app中导入了Main Header Aside

App.vue

<script>
import Header from "./page/Header.vue";
import Main from "./page/Main.vue";
import Aside from "./page/Aside.vue";

export default {
  components: {
    Header,
    Main,
    Aside,
  },
};
</script>

<template>
  <Header />
  <Main />
  <Aside />
</template>

<style scoped></style>

Header.vue

<template>
  <div class="header">
    <h3>Header</h3>
  </div>
</template>

<script></script>

<style scoped>
.header {
  width: 100%;
  height: 100px;
  border: 5px solid #999;
  text-align: center;
  line-height: 100px;
  box-sizing: border-box;
}
</style>

Main.vue

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

<script>
import Article from "./Article.vue";
export default {
  components: {
    Article,
  },
};
</script>

<style scoped>
.main {
  float: left;
  width: 70%;
  height: 400px;
  border: 5px solid #999;
  box-sizing: border-box;
  border-top: 0;
}
</style>

Aside.vue

<template>
  <div class="aside">
    <h3>Aside</h3>
    <Item />
    <Item />
    <Item />
  </div>
</template>

<script>
import Item from "./Item.vue";
export default {
  components: {
    Item,
  },
};
</script>

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

Main 与Article.Aside与Item结构

在Main 中导入了Article
在Aside中导入了Item

Article.vue

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

<script></script>

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

Item.vue

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

<script></script>

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

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---