优雅设计之美:实现Vue应用程序的时尚布局

葡萄城技术团队
葡萄城官方账号
博客专家认证
2023-11-06 10:02:00

前言

页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式。如果使用的是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>

结论

布局是减少样板和维护具有专业外观的应用程序的绝佳工具。结合全面的文件夹结构可以产生每个人都喜欢使用的代码库,除此之外,如果您想下载完整代码,欢迎点击这里:Gitee

扩展链接:

从表单驱动到模型驱动,解读低代码开发平台的发展趋势

低代码开发平台是什么?

基于分支的版本管理,帮助低代码从项目交付走向定制化产品开发

...全文
891 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复
Visual Studio Code 是由微软开发的一款免费、开源、跨平台的现代化轻量级代码编辑器,自发布以来迅速成为全球开发者最受欢迎的工具之一。它结合了编辑器的轻便性和集成开发环境(IDE)的强大功能,支持多种编程语言和开发场景,核心特点: 1. 跨平台支持 可在 Windows、macOS 和 Linux 上运行,保持一致的用户体验。 2. 轻量级与高性能 启动速度快,占用资源少,适合处理大型项目或低配置设备。 3. 智能代码补全 内置 IntelliSense(智能感知),提供代码提示、参数信息、快速修复等功能,支持 JavaScript、TypeScript、Python、C++ 等主流语言。 4. 内置终端 直接在编辑器内打开集成终端(支持 PowerShell、CMD、Bash 等),方便执行命令行操作。 5. 调试工具 内置调试器,支持断点、变量监视、调用堆栈查看等,无需离开编辑器即可调试代码。 6. Git 集成 直接通过侧边栏管理 Git 仓库,支持提交、分支切换、冲突解决等操作。 7. 丰富的扩展生态系统 通过 Extensions Marketplace 可安装数千款插件,扩展功能包括: 语言支持:如 Java、Go、Rust 等。 主题与图标:自定义界面风格。 工具集成:如 Docker、Kubernetes、数据库连接等。 效率工具:如 REST Client、Live Server 等。 8. 自定义与主题 支持修改键盘快捷键、界面主题、文件图标等,打造个性化开发环境。 9. 多光标编辑 按住 Alt(Windows/Linux)或 Option(macOS)点击可添加多个光标,同时编辑多处代码。 10. 远程开发支持 通过 Remote - SSH、Remote - Containers 等扩展,可直接连接远程服务器或开发容器,实现无缝协作。

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧