Vue3留言墙项目——头部和底部静态页面搭建

lalaxuan

已于 2022-11-20 03:16:15 修改

阅读量996

点赞数 2

分类专栏： Vue项目实战文章标签： vue.js javascript 前端

于 2022-11-20 03:01:32 首次发布

本文链接：https://blog.csdn.net/weixin_45732235/article/details/127942461

版权

本文介绍了如何使用Vue3创建一个留言墙项目，包括头部和底部的静态页面搭建。在头部部分，作者提到封装按钮组件，并引用了相关博客。在底部构建中，强调了先搭建整体布局的重要性，实现了三栏布局的效果。最后提供了代码改动的链接以便查阅。

摘要由CSDN通过智能技术生成

文章目录

创建项目

在这里插入图片描述 Vue中使用scss

头部

头部当中有两个按钮，然后根据设计稿可知，本留言墙中有4个按钮，所以可以自己封装一个按钮组件

按钮组件的博客

components/TopNav.vue

<template>
  <div class="topNav">
    <div class="left">
      <img src="@/assets/img/logo.svg" alt="" />
      <span class="title">ZEMOZ</span>
    </div>

    <div class="center">
      <my-button-vue type="primary">留言墙</my-button-vue>
      <my-button-vue type="default">照片墙</my-button-vue>
    </div>

    <div class="right">
      <div class="user-head"></div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.topNav {
     
  width: 100%;
  //   max-width: 1500px; 这里加了这句话以后，页面缩放会很怪
  height: 52px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
  //