vue组件设计

引言

学习vue的同学都知道Vue的组件化设计使得开发过程更加模块化、高效和可维护，那么本篇文章就通过一个例子来讲讲vue的组件设计吧，帮助大家快速理解vue的组件思维。
结合掘金的个人主页和vue的组件思想，第一幅图的左右两边我们分别能看到什么？思考几分钟，能看到什么？ ok哈,聪明的你肯定早已了然于胸，是的没错:左边是一个导航栏nav，一个主体区Main，一个侧边栏Aside，并且使用了流动布局flex让主体区和侧边栏在同一行。而右边则是实现这个页面layout的组件设计------组件树。并且你还发现了组件的复用。我的天呐，太强了掘友，三下五除二就把我抛出的问题解决了。

那接下来就是根据组件树去完成我们的组件设计了。根组件就是App.vue,里面嵌套了三个组件(导航栏，主体区，侧边栏)分别设为AppHeader,AppMain,AppAside。再用一个 div标签将作为组件,AppMain,AppAside的父容器用于设置流动布局flex。同样AppMain组件里面嵌套两个Item组件，AppAside嵌三个User组件(组件复用),至此组件设计就完成了。

Vue组件设计的基本原则

组件化思维：页面由多个组件构成，组件是开发的基本单位。通过将复杂的系统拆分成多个独立的组件，可以实现单独开发、单独维护，并且可以灵活地组合和复用这些组件。这不仅提高了开发效率，也使得系统的维护和扩展变得更加容易。
复用性：组件应该具备高度的复用性，像积木一样可以随意组合，以适应不同的业务场景和界面风格。
模块化：每个组件应该是一个独立的模块，具有清晰的职责和接口，便于测试和调试。

接下来就是代码实现了，这里就直接抛源码了，毕竟组件设计已经完成剩下的就是写一点一样式。

组件目录结构

App.vue

js 复制代码

<script setup>
import AppHeader from './components/AppHeader.vue'
import AppMain from './components/AppMain.vue'
import AppAside from './components/AppAside.vue'
</script>

<template>
 <div class="container">
  <AppHeader/>
  <div class="flx">
   <AppMain/>
   <AppAside/>
  </div>
</div>
</template>

<style scoped>
 .flx {
  display: flex;/*弹性布局*/
 }
 
</style>

AppHeader.vue

js 复制代码

<template>
    <header>
       <nav>
        <ul>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
        </ul>
       </nav> 
    </header>
</template>

<script setup>

</script>

<style  scoped>
 .header {
    height:100px;
    
 }
</style>

AppMain.vue

js 复制代码

<template>
    <main>
        Main
       <!-- <h1>你的评分是： {{ score }}</h1>
       <Rate :value="score"/> -->
        <Item />
        <Item />
    </main>
</template>

<script setup>
import Item from './Item.vue'
</script>

<style  scoped>
main {
    flex:1;
    height:500px;
    background-color: rgb(200, 255, 0);
}
</style>

AppAside.vue

js 复制代码

<template>
    <aside class="flx">
     
     <User />
     <User />
     <User />
     Aside
    </aside>
</template>

<script setup>
import User from './User.vue'
</script>

<style scoped>
aside {
    width:200px;
    height:500px;
    background-color: green;
}

</style>

Item.vue

js 复制代码

<template>
    <div>
     Item
    </div>
</template>

<script setup>

</script>

<style scoped>
div {
    height:100px;
    background-color: grey;
    margin:10px;
    /* margin-top: 100px;  */
}
</style>

User.vue

js 复制代码

<template>
    <div>
    User
    </div>
</template>

<script setup>

</script>

<style scoped>
div {
    width: 50px;
    height: 50px;
    background-color: pink;
    margin: 5px;
}
</style>

Style.css

css 复制代码

<template>
    <div>
    User
    </div>
</template>

<script setup>

</script>

<style scoped>
div {
    width: 50px;
    height: 50px;
    background-color: pink;
    margin: 5px;
}
</style>

引言

Vue组件设计的基本原则

来看看效果