Vue小白手把手教你构建Layout布局组件

2023-10-14 08:59:52

认识Vue中的Layout布局组件
从零开始构建Layout布局组件
- 安装Element UI
- 创建Vue项目
- 配置项目
- 编写布局组件代码
- 使用布局组件
拓展阅读

认识Vue中的Layout布局组件

在Vue中，Layout布局组件是一个负责管理应用程序界面的整体结构的组件。它通常包括头部、主体和尾部三个部分。头部通常用于显示应用程序的标题、导航栏等元素，主体用于显示应用程序的主要内容，尾部通常用于显示版权信息、联系方式等元素。

从零开始构建Layout布局组件

安装Element UI

Element UI是一个基于Vue.js的开源UI框架，它提供了丰富的组件库，可以帮助我们快速构建出美观实用的用户界面。要安装Element UI，可以在终端中运行以下命令：

npm install element-ui

创建Vue项目

创建一个新的Vue项目，可以在终端中运行以下命令：

vue create layout-component

配置项目

在项目目录下找到package.json文件，并将以下代码添加到dependencies对象中：

"element-ui": "^2.15.9"

然后运行以下命令来安装依赖项：

npm install

编写布局组件代码

在项目目录下创建src/components文件夹，并在其中创建一个新的文件Layout.vue。在Layout.vue文件中，添加以下代码：

<template>
  <div class="layout">
    <header class="header">
      <nav class="nav">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>
    <main class="main">
      <router-view />
    </main>
    <footer class="footer">
      <p>Copyright © 2023 Vue小白日记</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Layout'
}
</script>

<style>
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 auto;
  background-color: #f5f5f5;
}

.nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.main {
  flex: 1 1 auto;
  overflow: auto;
}

.footer {
  flex: 0 0 auto;
  background-color: #f5f5f5;
  text-align: center;
}
</style>

使用布局组件

在项目目录下的src/App.vue文件中，添加以下代码：

<template>
  <Layout>
    <router-view />
  </Layout>
</template>

<script>
import Layout from '@/components/Layout.vue'

export default {
  name: 'App',
  components: {
    Layout
  }
}
</script>