Vue3前端开发页面框架搭建【示例代码+调试步骤】

周玄九

已于 2025-03-04 17:15:31 修改

阅读量1.3k

点赞数 35

分类专栏： Vue3前端开发文章标签： vue.js 前端 javascript

于 2025-03-04 17:04:34 首次发布

本文链接：https://blog.csdn.net/keith66/article/details/146018723

版权

Vue3前端开发专栏收录该内容

3 篇文章

订阅专栏

如果你是一个已经进行好了各种vue配置的前端初学者，请往下看，本文的前端初始布局将对你布局的容器感认识有很大作用

本文将以一个简单页眉的架构建设为例讲解整体的vue容器布局

布局讲解

从布局上来看，一个页面一般先使用element-plus构建基本布局(这里其实你可以自己定义很多个div, element-plus组件里边为简单布局方式提供了很好的demo,可以直接调用)

<template>
  <el-container>
    <el-header>
    </el-header>
    <el-main>
    </el-main>
    <el-footer>
    </el-footer>
  </el-container>
</template>

设置一下CSS,消除默认的padding

  .header{
    padding: 0%;
    display: flex;
  } 
 .main{
    padding: 0%;
  }
  .footer
  {
    padding: 0%;
  }

这里把父容器header的display设置成了flex，是因为这对子容器的布局有着相当重要的影响

详情可以点击这里弹性盒子（flexbox）布局属性详解_弹性盒子的属性-CSDN博客

一维线性布局（从左到右，从上到下或者反着来都可以用flex解决）

如果涉及到二维稍微复杂点的，则需要用到Grid布局了，比如下边的瀑布流布局

好，继续完善一下我们的框架

<template>
  <el-container>
    <el-header class="header">
      <div class="menu">
      </div>
      <div class="logo">

      </div>

      <div class="work-with-us">

      </div>
    </el-header>
    <el-main class="main">
    </el-main>
    <el-footer class="footer">
    </el-footer>
  </el-container>
</template>

<style scoped>
  .header{
    padding: 0%;
    display: flex;
  }
  .menu{
    padding: 0%;
    width: 30%;
    height: 100%;
  }
  .logo{
    padding: 0%;
    width: 40%;
    height: 100%;
  }
  .work-with-us{
    padding: 0%;
    width: 30%;
    height: 100%;
  }
  .main{
    padding: 0%;
  }
  .footer
  {
    padding: 0%;
  }

</style>
<script setup>
</script>

浏览器调试基本框架

我们的el-containner下有三大块组成，本文主要以header为例讲解搭建，接下来细看header下的三个div区

发现header下边被我们分成了三个小块，如图所示,由于父容器header是flex布局，所以menu->work-with-us 就从左往右排了（三个的宽度加起来得<=100%），读者感兴趣可以常识删除header中的display=flex,会发现这三个区域变成了从上往下排列。

元素填充

其实做前端就和做PPT的感觉很像，如果我们希望能做出好看的样式，一个预先的框架是必不可少的，正如我们之前所做的容器排布，如果不提前想好，就会非常混乱。下边我们将对这三个div进行元素填充

菜单栏部分

cv了一下 element-plus官方的下拉菜单栏代码:

      <el-dropdown placement="bottom-start" style="margin-left: 50px;display: flex">
          <el-button> Menu </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>firstPage</el-dropdown-item>
              <el-dropdown-item>secondPage</el-dropdown-item>
              <el-dropdown-item>thirdPage</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

观察一下渲染效果

发现这个小按钮塞在了顶部，想让他离上方有一定距离，简单进行内联的style设计即可

  <el-dropdown placement="bottom-start" style="margin-top: 5%">
          <el-button> Menu </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>firstPage</el-dropdown-item>
              <el-dropdown-item>secondPage</el-dropdown-item>
              <el-dropdown-item>thirdPage</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

注意：内联的时候这个5%是关于父容器的，如果你直接写在class里边，则是关于页面的

观察一下效果，发现还行，我们进行下一步，在页眉的中间放一个logo

Logo部分

    <div class="logo">
          <img  src="../../asset/board/beihangLogo.png" style="width: 25%">
      </div>

发现这个图像非常的膨胀，如何把他缩回到我们的容器里边呢？根据之前的经验，是不是内联设置一个width=%xx就会变成父容器的百分之XX，从而规范到我们之前画的小块里呢？

答案当然是正确的，观察一下效果

这个部分没有什么问题了，我们在页眉的最右端再加上一个字样，这个header也就初具规模了

Work-With-Us 字样部分

<div class="work-with-us">
     <p style="margin-top: 5%">Work With Us</p>
</div>

.work-with-us{
    font-family: 'Microsoft YaHei', 微软雅黑; font-weight: 700;

    padding: 0%;
    width: 30%;
    height: 100%;
  }

分割线部分

光是这样总是显得有些不够分明，好的界面应该会有很明晰的区域切分，才能让用户用的明白

这里加一条分割线来达到这个效果:

<div class="divider">
   <el-divider>
       <el-icon><star-filled /></el-icon>
   </el-divider>
</div>
.divider{
   
    padding: 0%;
    width: 100%;
}

渲染一下看看效果：发现还是有点抽象在的，发现logo与分割线重叠，不是因为容器布局出现问题，点一点会发现容器摆的很整齐，是logo太大跑出了容器，偷懒一点其实可以调个图层，我们这里调整分割线的上边距来解决问题

  .divider{
    margin-top: 3%;
    padding: 0%;
    width: 100%;
  }

再看效果，发现能看多了

结语

很多vue初学者一开始就在追求如何做出很炫酷的效果，而对页面的整体布局没有一个比较全面的了解，本文旨在提供一个基础的页面布局流程，为前端初学者搭建更好的思维框架。