優雅設計之美：實現Vue應用程序的時尚佈局

前言

頁面佈局是減少代碼重複和創建可維護且具有專業外觀的應用程序的基本模式。如果使用的是Nuxt，則可以提供開箱即用的優雅解決方案。然而，令人遺憾的是，在Vue中，這些問題並未得到官方文檔的解決。

經過多次嘗試，小編得出了一個運行良好且可擴展而不會令人頭疼的架構的模式。下面用一個簡單的例子爲大家介紹一下。

設置需求

佈局架構需要滿足的需求：

頁面應聲明每個部分的佈局和組件。
對頁面的更改不應影響其他頁面。
如果佈局的某些部分在頁面中是通用的，則只應聲明一次。

設置Vue路由

小編需要在頁面之間導航，這就是小編要設置 vue-router 的原因。 Vue-cli 腳手架vite提供了在創建新項目時包含它的選項，但如果您沒有用腳手架創建項目，可以通過下面的方式設置路由。

1. 安裝 vue-router 依賴項

npm i -D vue-router@4

2. 聲明路由

const routes = [
  { path: "/", component: () => import("./pages/HomePage.vue") },
  { path: "/explore", component: () => import("./pages/ExplorePage.vue") },
];

3. 將其安裝爲插件

import { createApp } from "vue";
import { createRouter, createWebHashHistory } from "vue-router";
import App from "./App.vue";
import routes from "./routes.ts"

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

const app = createApp(App);

app.use(router);

app.mount("#app");

4. 最後，更新 App.vue使其僅包含router-view

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

運行後的顯示效果如下圖所示：

頁面

下面將創建以下頁面：主頁、探索、文章和 404，以及三種佈局：三列、兩列和空白。

三列布局

主頁是每個流行的社交網絡使用的典型 3 列布局。第一列包含應用程序的徽標和導航，在使用此佈局的每個頁面中保持不變。這同樣適用於右下角的頁腳。每個頁面的主要內容和側邊欄小部件都會更改。

首先從 HomePage.vue 組件開始實現這一點。

<script setup lang="ts">
import ThreeColumnLayout from "../layouts/ThreeColumnLayout.vue";
import ArticleCard from "../components/ArticleCard.vue";
import WidgetFriendSuggestions from "../components/WidgetFriendSuggestions.vue";
import useArticles from "../composables/useArticles";
const articles = useArticles().getArticles();
</script>

<template>
  <ThreeColumnLayout>
    <h2 class="text-3xl font-bold mb-4">Homepage content</h2>
    <ArticleCard v-for="article in articles" :article="article" />

    <template #aside>
      <WidgetFriendSuggestions />
    </template>
  </ThreeColumnLayout>
</template>

小編使用一個 ThreeColumnLayout 組件（稍後會實現它）。默認插槽具有標題和文章列表，它們是頁面的主要內容。此外，小編創建一個名稱爲aside 的命名槽，用於聲明小部件。

按照通用約定， ThreeColumnLayout 組件放置在文件夾中 /layouts 它將使用網格容器並用於

grid-template-areas 創建三列布局。

佈局的實現細節將取決於此組件，而不是頁面。使用flexbox，網格系統或任何其他技術都是可能的。如果使用全寬、盒裝或流體佈局，則同樣適用。

此佈局有 3 列

第一列將包含硬編碼的徽標和導航組件。
第二列將僅創建默認插槽，並讓頁面決定要插入的內容。

第三列將包含每個頁面通用的旁槽和頁腳組件。

ThreeColumnLayout.vue

<script setup>
import AppNavigation from "../components/AppNavigation.vue";
import AppFooter from "../components/AppFooter.vue";
import AppLogo from "../components/AppLogo.vue";
</script>

<template>
  <div class="three-column-layout">
    <header>
      <AppLogo />
      <AppNavigation />
    </header>

    <main>
      <slot />
    </main>

    <aside>
      <slot name="aside" />
      <AppFooter />
    </aside>
  </div>
</template>

<style scoped lang="scss">
.three-column-layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "aside";

  header {
    grid-area: header;
    margin-top: 30px;
  }
  main {
    grid-area: main;
    margin-top: 10px;
    padding: 20px;
  }
  aside {
    grid-area: aside;
    margin-top: 10px;
    padding: 20px;
  }

  @media (min-width: 768px) {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas: "header main aside";
  }
}
</style>

實現效果如下圖所示：

創建具有相同佈局的新頁面將證明這種方法是多麼簡潔。

使用下面的代碼創建文章頁面，並在側邊欄上有一個額外的小部件：

<script setup>
import ThreeColumnLayout from "../layouts/ThreeColumnLayout.vue";
import WidgetRelatedContent from "../components/WidgetRelatedContent.vue";
import WidgetFriendSuggestions from "../components/WidgetFriendSuggestions.vue";
import { useRoute } from "vue-router";
import useArticles from "../composables/useArticles";
const article = useArticles().getArticle(useRoute().params.id);
</script>

<template>
  <ThreeColumnLayout>
    <h2 class="text-3xl font-bold mb-4">{{ article.title }}</h2>
    <div class="max-w-md" v-html="article.description"></div>

    <template #aside>
      <WidgetFriendSuggestions />
      <WidgetRelatedContent />
    </template>
  </ThreeColumnLayout>
</template>

實現的效果：

兩列布局

對於“詳情”頁面，小編將創建一個兩列布局。第一列將與三列布局相同，但主要部分將佔據屏幕的其餘部分，並將頁腳放在底部。

該實現看起來與上一個沒有太大區別。但是這次小編使用flex-basis。（只是爲了演示創建CSS佈局的不同方法。在實際場景中，所有實現都應使用相同的技術。）

TwoColumnLayout.vue

<script setup>
import AppNavigation from "../components/AppNavigation.vue";
import AppLogo from "../components/AppLogo.vue";
import AppFooter from "../components/AppFooter.vue";
</script>
<template>
  <div class="two-column-layout">
    <header>
      <AppLogo />
      <AppNavigation />
    </header>

    <main>
      <slot />
      <AppFooter />
    </main>
  </div>
</template>

<style scoped>
.two-column-layout {
  display: flex;
  @media (max-width: 768px) {
    flex-direction: column;
  }
}
header {
  flex-basis: 20%;
  margin-top: 30px;
}

main {
  flex-basis: 80%;
  margin-top: 10px;
  padding: 20px;
}
</style>

使用此佈局的瀏覽頁面非常簡單。

Explore.vue

<script setup>
import TwoColumnLayout from "../layouts/TwoColumnLayout.vue";
import ExploreItem from "../components/ExploreItem.vue";

import useArticles from "../composables/useArticles";
const articles = useArticles().getExploreArticles();
</script>

<template>
  <TwoColumnLayout>
    <h2 class="text-3xl font-bold mb-12">
      Latest content on <a target="_blank" href="https://dev.to/">Dev.to</a>
    </h2>
    <div class="grid lg:grid-cols-3 gap-6">
      <ExploreItem v-for="article in articles" :article="article" />
    </div>
  </TwoColumnLayout>
</template>

實現效果：

空白布局

最後，小編創建一個可在 404 頁面上使用的空白整頁佈局。

<template>
  <main class="container my-24 px-6 mx-auto">
    <slot />
  </main>
</template>

即使實現很簡單，使用佈局也很重要，這次只有一個居中的容器（tailwind.css）。

這樣，小編可以保持頁面組件的精簡，並確保使用此佈局的多個頁面的外觀和行爲相同。

<script setup>
import BlankLayout from "../layouts/BlankLayout.vue";
import PageNotFound from "../components/PageNotFound.vue";
</script>

<template>
  <BlankLayout>
    <PageNotFound />
  </BlankLayout>
</template>