前言
頁面布局是減少代碼重復(fù)和創(chuàng)建可維護(hù)且具有專業(yè)外觀的應(yīng)用程序的基本模式。如果使用的是Nuxt，則可以提供開箱即用的優(yōu)雅解決方案。然而，令人遺憾的是，在Vue中，這些問題并未得到官方文檔的解決。
經(jīng)過多次嘗試，小編得出了一個(gè)運(yùn)行良好且可擴(kuò)展而不會(huì)令人頭疼的架構(gòu)的模式。下面用一個(gè)簡單的例子為大家介紹一下。
設(shè)置需求
布局架構(gòu)需要滿足的需求：
-
頁面應(yīng)聲明每個(gè)部分的布局和組件。
-
對頁面的更改不應(yīng)影響其他頁面。
-
如果布局的某些部分在頁面中是通用的，則只應(yīng)聲明一次。
設(shè)置Vue路由
小編需要在頁面之間導(dǎo)航，這就是小編要設(shè)置 vue-router 的原因。 Vue-cli 腳手架vite提供了在創(chuàng)建新項(xiàng)目時(shí)包含它的選項(xiàng)，但如果您沒有用腳手架創(chuàng)建項(xiàng)目，可以通過下面的方式設(shè)置路由。
1.?安裝 vue-router 依賴項(xiàng)
npm i -D vue-router@42.?聲明路由
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>運(yùn)行后的顯示效果如下圖所示：
頁面
下面將創(chuàng)建以下頁面：主頁、探索、文章和 404，以及三種布局：三列、兩列和空白。
三列布局
主頁是每個(gè)流行的社交網(wǎng)絡(luò)使用的典型 3 列布局。第一列包含應(yīng)用程序的徽標(biāo)和導(dǎo)航，在使用此布局的每個(gè)頁面中保持不變。這同樣適用于右下角的頁腳。每個(gè)頁面的主要內(nèi)容和側(cè)邊欄小部件都會(huì)更改。
首先從 HomePage.vue 組件開始實(shí)現(xiàn)這一點(diǎn)。
<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>小編使用一個(gè) ThreeColumnLayout 組件（稍后會(huì)實(shí)現(xiàn)它）。默認(rèn)插槽具有標(biāo)題和文章列表，它們是頁面的主要內(nèi)容。此外，小編創(chuàng)建一個(gè)名稱為aside 的命名槽，用于聲明小部件。
按照通用約定， ThreeColumnLayout 組件放置在文件夾中 /layouts 它將使用網(wǎng)格容器并用于
grid-template-areas 創(chuàng)建三列布局。
布局的實(shí)現(xiàn)細(xì)節(jié)將取決于此組件，而不是頁面。使用flexbox，網(wǎng)格系統(tǒng)或任何其他技術(shù)都是可能的。如果使用全寬、盒裝或流體布局，則同樣適用。
此布局有 3 列
第一列將包含硬編碼的徽標(biāo)和導(dǎo)航組件。第二列將僅創(chuàng)建默認(rèn)插槽，并讓頁面決定要插入的內(nèi)容。
第三列將包含每個(gè)頁面通用的旁槽和頁腳組件。
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>實(shí)現(xiàn)效果如下圖所示：
創(chuàng)建具有相同布局的新頁面將證明這種方法是多么簡潔。
使用下面的代碼創(chuàng)建文章頁面，并在側(cè)邊欄上有一個(gè)額外的小部件：
<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>實(shí)現(xiàn)的效果：
兩列布局
對于“詳情”頁面，小編將創(chuàng)建一個(gè)兩列布局。第一列將與三列布局相同，但主要部分將占據(jù)屏幕的其余部分，并將頁腳放在底部。
該實(shí)現(xiàn)看起來與上一個(gè)沒有太大區(qū)別。但是這次小編使用flex-basis。（ 只是為了演示創(chuàng)建CSS布局的不同方法。在實(shí)際場景中，所有實(shí)現(xiàn)都應(yīng)使用相同的技術(shù)。）
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" >Dev.to</a>
</h2>
<div class="grid lg:grid-cols-3 gap-6">
<ExploreItem v-for="article in articles" :article="article" />
</div>
</TwoColumnLayout>
</template>實(shí)現(xiàn)效果：
空白布局
最后，小編創(chuàng)建一個(gè)可在 404 頁面上使用的空白整頁布局。
<template>
<main class="container my-24 px-6 mx-auto">
<slot />
</main>
</template>即使實(shí)現(xiàn)很簡單，使用布局也很重要，這次只有一個(gè)居中的容器（tailwind.css）。
這樣，小編可以保持頁面組件的精簡，并確保使用此布局的多個(gè)頁面的外觀和行為相同。
<script setup>
import BlankLayout from "../layouts/BlankLayout.vue";
import PageNotFound from "../components/PageNotFound.vue";
</script>
<template>
<BlankLayout>
<PageNotFound />
</BlankLayout>
</template>
結(jié)論
布局是減少樣板和維護(hù)具有專業(yè)外觀的應(yīng)用程序的絕佳工具。結(jié)合全面的文件夾結(jié)構(gòu)可以產(chǎn)生每個(gè)人都喜歡使用的代碼庫，除此之外，如果您想下載完整代碼，歡迎點(diǎn)擊這里：Gitee。
文章轉(zhuǎn)載自：葡萄城技術(shù)團(tuán)隊(duì)
原文鏈接：https://www.cnblogs.com/powertoolsteam/p/17774294.html文章來源：http://www.zghlxwxcb.cn/news/detail-796455.html
體驗(yàn)地址：引邁 - JNPF快速開發(fā)平臺(tái)_低代碼開發(fā)平臺(tái)_零代碼開發(fā)平臺(tái)_流程設(shè)計(jì)器_表單引擎_工作流引擎_軟件架構(gòu)文章來源地址http://www.zghlxwxcb.cn/news/detail-796455.html
到了這里，關(guān)于優(yōu)雅設(shè)計(jì)之美：實(shí)現(xiàn)Vue應(yīng)用程序的時(shí)尚布局的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
