长沙 php企业网站系统,电子商务师是做什么的,比较专业的app开发公司,网页截图快捷键可拉动本文为翻译文章#xff0c;原文链接#xff1a;
** https://fadamakis.com/clean-layout-architecture-for-vue-applications-a738201a2a1e
前言
页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式。如果使用的是Nuxt#xff0c;则可以提供开箱即用…本文为翻译文章原文链接
** https://fadamakis.com/clean-layout-architecture-for-vue-applications-a738201a2a1e
前言
页面布局是减少代码重复和创建可维护且具有专业外观的应用程序的基本模式。如果使用的是Nuxt则可以提供开箱即用的优雅解决方案。然而令人遗憾的是在Vue中这些问题并未得到官方文档的解决。
经过多次尝试小编得出了一个运行良好且可扩展而不会令人头疼的架构的模式。下面用一个简单的例子为大家介绍一下。
设置需求
布局架构需要满足的需求
页面应声明每个部分的布局和组件。对页面的更改不应影响其他页面。如果布局的某些部分在页面中是通用的则只应声明一次。
设置Vue路由
小编需要在页面之间导航这就是小编要设置 vue-router 的原因。 Vue-cli 脚手架vite提供了在创建新项目时包含它的选项但如果您没有用脚手架创建项目可以通过下面的方式设置路由。 安装 vue-router 依赖项 声明路由 将其安装为插件 最后更新 App.vue使其仅包含router-view
运行后的显示效果如下图所示
页面
下面将创建以下页面主页、探索、文章和 404以及三种布局三列、两列和空白。
三列布局
主页是每个流行的社交网络使用的典型 3 列布局。第一列包含应用程序的徽标和导航在使用此布局的每个页面中保持不变。这同样适用于右下角的页脚。每个页面的主要内容和侧边栏小部件都会更改。
首先从 HomePage.vue 组件开始实现这一点。
小编使用一个 ThreeColumnLayout 组件稍后会实现它。默认插槽具有标题和文章列表它们是页面的主要内容。此外小编创建一个名称为aside 的命名槽用于声明小部件。
按照通用约定 ThreeColumnLayout 组件放置在文件夹中 /layouts 它将使用网格容器并用于
grid-template-areas 创建三列布局。
布局的实现细节将取决于此组件而不是页面。使用flexbox网格系统或任何其他技术都是可能的。如果使用全宽、盒装或流体布局则同样适用。
此布局有 3 列
第一列将包含硬编码的徽标和导航组件。 第二列将仅创建默认插槽并让页面决定要插入的内容。
第三列将包含每个页面通用的旁槽和页脚组件。
ThreeColumnLayout.vue
实现效果如下图所示
创建具有相同布局的新页面将证明这种方法是多么简洁。
使用下面的代码创建文章页面并在侧边栏上有一个额外的小部件
实现的效果
两列布局
对于“详情”页面小编将创建一个两列布局。第一列将与三列布局相同但主要部分将占据屏幕的其余部分并将页脚放在底部。
该实现看起来与上一个没有太大区别。但是这次小编使用flex-basis。 只是为了演示创建CSS布局的不同方法。在实际场景中所有实现都应使用相同的技术。
TwoColumnLayout.vue
使用此布局的浏览页面非常简单。
Explore.vue
实现效果 空白布局
最后小编创建一个可在 404 页面上使用的空白整页布局。
即使实现很简单使用布局也很重要这次只有一个居中的容器tailwind.css。
这样小编可以保持页面组件的精简并确保使用此布局的多个页面的外观和行为相同。 结论
布局是减少样板和维护具有专业外观的应用程序的绝佳工具。结合全面的文件夹结构可以产生每个人都喜欢使用的代码库除此之外如果您想下载完整代码欢迎点击这里** Gitee。
