《Nuxt.js 实战：从放弃到入门》二、Element Plus 集成

​​

在项目开发过程中，引入公共头部和脚部组件，有助于实现页面布局的统一，提升用户体验。以下是具体的实施步骤和相关代码。

首先，需要创建一个目录，用于存放相关组件文件，为项目文件结构提供清晰的组织方式。

​​

创建 Header.vue 组件
Header.vue 组件定义了页面的公共头部部分，包含导航链接等内容。其代码如下：

<template>
  <header class="bg-white shadow-sm">
    <nav class="container mx-auto px-4 py-3">
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <NuxtLink to="/" class="text-xl font-bold text-gray-800">OutEasy</NuxtLink>
          <div class="hidden md:flex space-x-4">
            <NuxtLink to="/resize" class="text-gray-600 hover:text-gray-900">图片调整</NuxtLink>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

​创建 Footer.vue 组件
Footer.vue 组件定义了页面的公共脚部部分，包含版权信息和相关链接。其代码如下：

<template>
  <footer class="bg-gray-50 border-t">
    <div class="container mx-auto px-4 py-6">
      <div class="flex flex-col items-center justify-center space-y-2">
        <p class="text-gray-600 text-sm">&copy; 2024 OutEasy. All rights reserved.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">关于我们</a>
          <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">使用条款</a>
          <a href="#" class="text-gray-500 hover:text-gray-700 text-sm">隐私政策</a>
        </div>
      </div>
    </div>
  </footer>
</template>

​在 app.vue 中引入组件
在 app.vue 中，将 Header.vue 和 Footer.vue 组件引入，以构建完整的页面结构。代码如下：

<template>
  <div class="min-h-screen flex flex-col">
    <Header />
    <main class="flex-grow">
      <NuxtPage />
    </main>
    <Footer />
  </div>
</template>

‍

在 app.vue 中引入组件

在 app.vue 中，将 Header.vue 和 Footer.vue 组件引入，以构建完整的页面结构。代码如下：

<script setup>
const router = useRouter()

onMounted(() => {
     
  router.push('/resize')
})
</script>

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

接入 Element - Plus UI 组件框架

为优化页面样式和交互，接入 Element - Plus UI