vite基础学习笔记：11.组件拆分

smellsummer

已于 2023-10-17 14:57:42 修改

阅读量96

点赞数

分类专栏： vite基础学习笔记文章标签：前端

于 2023-10-09 18:05:10 首次发布

本文链接：https://blog.csdn.net/smellsummer/article/details/133703334

版权

vite基础学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

说明：自学做的笔记和记录，如有错误请指正

1. 全局组件

（1）创建组件

在components文件夹下创建top（头部组件）和bottom（尾部组件）文件夹如下：

（2）注册组件

在main.ts中引入并注册全局组件

代码如下：

//引入全局组件
import Top from '../src/components/top/index.vue';
import Bottom from '../src/components/bottom/index.vue';
const app = createApp(App);

app.component('Top',Top);
app.component('Bottom',Bottom);

app.mount("#app");

（3）使用组件

在App.vue中使用全局组件

完善后组件代码如下：

components/top/index.vue

<template>
  <div class="top">
    <div class="top-left">
      <span><img src="../../assets/img/logo.png"></span>
      <span>尚医通前端项目练习</span>
    </div>
    <div class="top-right">
      <span>退出登录</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.top {
  height: 60px;
  color: white;
  display: flex;
  flex-direction: row;

  .top-left {
    display: flex;
    flex-direction: row;
    position: absolute;
    left: 10%;

    img {
      height: 50px;
      width: 50px;
      margin-top: 5px;
    }

    span {
      font-size: 18px;
      line-height: 60px;
      color: #4490f1;
      margin-right: 10px;
    }
  }

  .top-right {
    color: #666;
    font-size: 14px;
    line-height: 60px;
    position: absolute;
    right: 10%;
  }
}
</style>

components/bottom/index.vue

<template>
  <div class="bottom">
    <div class="content">
      <div class="left">京ICP备 13018369号 电话挂号010-56253825</div>
      <div class="right">
         <span>联系我们</span>
         <span>合作伙伴</span>
         <span>用户协议</span>
         <span>隐私协议</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bottom {
  position:fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background: #f0f2f5;
  display: flex;
  justify-content: center;
  .content {
    width: 1200px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #7f7f7f;
    .right{
        span{
            margin: 0px 5px;
        }
    }
  }
}
</style>

App.vue

<template>
  <div class="container">
    <!-- 顶部全局组件 -->
    <Top/>
    <!-- 展示路由组件的区域 -->
    <div class="content">
      <router-view></router-view>
    </div >
    <!-- 底部全局组件 -->
    <Bottom/>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .content {
    margin-top: 70px;
    margin-bottom: 50px;
    width: 100%;
    min-height: 700px;
  }
}
</style>

显示如下：