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

页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式。如果使用的是Nuxt，则可以提供开箱即用的优雅解决方案。然而，令人遗憾的是，在Vue中，这些问题并未得到官方文档的解决。本文将以一些简单的示例为大家介绍一种运行良好且可扩展而不会令人头疼的架构的模式。

发布于 2023/11/02 20:02

SpreadJS

本文为翻译文章，原文链接：

https://fadamakis.com/clean-layout-architecture-for-vue-applications-a738201a2a1e

前言

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


结论

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

SpreadJS | 下载试用

纯前端表格控件SpreadJS，兼容 450 种以上的 Excel 公式，具备“高性能、跨平台、与 Excel 高度兼容”的产品特性，备受华为、苏宁易购、天弘基金等行业龙头企业的青睐，并被中国软件行业协会认定为“中国优秀软件产品”。SpreadJS 可为用户提供类 Excel 的功能，满足表格文档协同编辑、 数据填报、 类 Excel 报表设计等业务场景需求，极大的降低企业研发成本和项目交付风险。

如下资源列表，可以为您评估产品提供帮助：

热门博客分类
ComponentOne Enterprise SpreadJS ActiveReports 活字格 Wyn 商业智能 WijmoJS GcExcel ActiveReportsJS 行业动态
相关产品

SpreadJS

可嵌入您系统的在线Excel的纯前端表格控件

免费试用 产品详情
推荐相关案例
京东物流 - 表格技术在物流行业的敏捷应用实践

物流大促期间出库单量积压场景下，不同仓的生产操作人员需要在统一数据源基础上进行基于自身仓情况的个性化查询分析，从而能够实时监控客单情况，防止积压。要想实现这样的功能，对数据分析平台的要求就非常高。在引入SpreadJS之后，Udata平台可以为客户提供更高效的数据查询方案。

网易 - 灵犀办公文档

为了在前端解析Excel文档，实现多人在线协同编辑，灵犀文档的数据集处理模块完全基于葡萄城的纯前端表格控件SpreadJS进行开发。通过嵌入SpreadJS，文档系统完美复刻了Excel的UI架构，并有效提升了系统多人协作和数据处理效率。

用友 - 畅捷通 - 财务T-UFO报表

由畅捷通推出的财务T-UFO报表，是用友T+Cloud的两大功能模块之一，提供类Excel风格，用于制定个性化报表，并支持自定义取数，借助该报表，财务人员可按部门、个人、往来单位、存货、项目设置辅助核算，实现“人财货客”全链条闭环。

航天信息软件 - 智慧统计平台

由航天信息软件研发的智慧统计平台，基于某统计局的报表填报系统项目而开发的，通过嵌入纯前端表格控件 SpreadJS，该平台实现了在线报表设计及分析功能，通过拖拽元数据（指标）可以快速设计各类报表样式，实现表内、表间审核公式和表内、表间计算公式等。

立信会计师事务所：借助表格技术提升智能审计云平台应用体验

立信会计师事务所（特殊普通合伙）（简称“立信”）于 1927 年在上海创建，是中国建立最早和最有影响的会计师事务所之一。智能审计云平台（SACP）是立信自主研发的行业内第一款按风险导向审计模式要求，以重大报错风险识别、评估和应对作为工作主线，以数据为基础、以数据挖掘为核心、以数据共享为纽带，着眼于数据、立足于数据、集成大数据接口、以数据驱动审计计划的完全基于云的智慧型智能审计系统。

查看更多精彩案例
推荐相关资源
《精算与金融行业场景及技术应用》

本白皮书旨在深入探讨精算学在风险管理和财务分析两个关键领域中的应用。重点介绍如何利用类Excel纯前端表格技术进行数据分析和计算的有效性。通过精确的数据处理和准确的数值模型，帮助金融业企业提高运行效率、加强风险管理，增强公司的决策能力和竞争力。

2023 葡萄城表格技术产品及应用白皮书

葡萄城基于40余年的专业控件技术积累和在电子表格应用领域的经验，推出《2023 葡萄城表格技术产品及应用白皮书》，通过本资料您可以详细了解到葡萄城表格产品的核心技术优势，领略典型应用场景与实践案例，还可获取丰富的技术资源。

LIMS数字化系统方案白皮书

本白皮书旨在分享B/S架构下LIMS系统在数据填报、数据分析和生成报告等场景中的技术痛点及解决方案，帮助企业提升运行效能、质量管理水平，增强竞争力和科研能力。通过引入数字化系统，实验室能够实现更高效的管理和更准确的数据分析，为实验室的发展和创新提供了有力支持。

《全面预算编制场景及技术应用》

本白皮书旨在深入探讨类Excel控件在全面预算编制中的应用，重点介绍如何借助类Excel控件在业务预算和财务预算场景中进行数据的填报和分析。通过提高预算编制的效率和准确性，帮助企业更好地理解和传达预算信息，增强公司的决策能力和竞争力。

查看更多实用资源
关注微信
葡萄城社区二维码

关注“葡萄城社区”

活字格低代码二维码

关注“活字格低代码”

想了解更多信息，请联系我们, 随时掌握技术资源和产品动态

葡萄城热门产品

活字格
打通现有软件，快速定制面向未来的个性化应用
免费试用 产品详情
SpreadJS
可嵌入您系统的在线Excel的纯前端表格控件
免费试用 产品详情
Wyn商业智能
可与企业自有系统深度集成，增强数据分析的 BI 工具
免费试用 产品详情