前端进阶之路-从传统前端到VUE-JS（第四期-VUE-JS页面布局与动态内容实现）（Element Plus方式）

上期内容我们了解了VUE-JS的UI组件库的使用，接下来，我们就要利用UI组件库来设计自己的网页了

注意：本文需要一定的html，css基础，如果不了解，不妨先看看传统前端开发栏目了解一些基本内容

https://blog.csdn.net/2404_89737060/category_12988642.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12988642&sharerefer=PC&sharesource=2404_89737060&sharefrom=from_link

还是通过Element Plus的组件来进行，页面设计要用到Element Plus组件库的"布局容器"内容

链接https://element-plus.org/zh-CN/component/container.html

至于布局容器的使用本期内容以常见的上，中，下三部分的样式

因为该布局最常见，以"人民日报"为例：http://www.people.com.cn/

上：通常是导航栏

中：正文内容

下：官方备案，邮箱，电话等信息

这是国内最常见的网页布局方式，所以本期内容以此为标准进行（如果自己有想法也可以用其它的布局方式）

但是为了后期方便维护，所以我们需要遵守一些开发规范，当然这些开发规范是我们自己设计的，用最适合自己的方式就行（团队协作开发的话听负责人的）

如果没有自己开发过网站的经历的话换一个说法：类似于下象棋，为了下一次玩的时候方便摆出来，我们通常会将红棋和黑棋分开放，而且每个棋种都归类放，这样在下一次玩的时候摆起来就方便多了，不会因为太混杂而导致好长时间都没摆开

我们自己设计的开发规范就是"将红棋和黑棋分开放，而且每个棋种都归类放"以方便后期维护（注意是自己设计，按自己最舒服的方式来就行，前提是个人开发，不是团队协作）

在"src"目录里新建一个文件夹"layout"（翻译：布局）（名字可以自己设置，但最好是英文，用layout是因为他最常见）

新建一个vue文件做布局，名字是BasicLayout（翻译：基础布局）

在此之前，我们还要了解一个vue3的知识点-组合式api（Composition API）：

Vue 3 的组合式 API（Composition API）是 Vue 3 中引入的一种新的编程模式，它允许开发者通过函数组合的方式来组织和复用代码

官方介绍

组合式 API 是一系列 API 的集合，主要包括以下内容：

响应式 API：例如 ref() 和 reactive()，用于创建响应式状态、计算属性和侦听器。

生命周期钩子：例如 onMounted() 和 onUnmounted()，允许在组件生命周期的各个阶段添加逻辑。

依赖注入：通过 provide() 和 inject()，可以在组件之间传递数据，同时利用 Vue 的依赖注入系统。

组合式 API 的核心是 setup 函数，它是组件生命周期中最先执行的函数，用于定义响应式数据、计算属性、方法和生命周期钩子。通过 setup 函数，可以将与同一功能相关的代码集中在一起，而不是像选项式 API 那样分散在不同选项中。

（官方文档比较抽象，看不懂直接看下面就行）

想象一下，你在做饭，比如红烧肉。在传统的选项式 API 中，你需要把食材（数据）、调料（方法）、煮饭步骤（生命周期钩子）分别放在不同的地方，比如不同的抽屉里。当你需要做饭时，你需要在不同的抽屉之间来回找东西，这可能会导致混乱。

而在组合式 API 中，你可以把做红烧肉的所有食材、调料和步骤都放在一个篮子里，这样当你需要做饭时，所有相关的东西都在一个地方，非常方便。你可以根据需要，把篮子里的东西（逻辑）组合起来，甚至可以把这个篮子作为一个整体分享给其他人，让他们也能轻松做出同样的菜。

这种“篮子”的方式，就是组合式 API 的核心思想——把相关的逻辑组合在一起，方便管理和复用

（核心思想还是之前我们讲到的摆放象棋类似，目的还是为了之后的易于维护）

在新建的BasicLayout中把以下代码放进去就可以调用组合式api了（这里加id是为了接下来引用，如果不了解可以看"传统前端开发"栏目的css部分内容）

<template><div>id="basic-layout">demo<</div></template><style scoped></style><script setup lang="ts"></script>

（实际上就是原有的模板上加了几个函数，如果你要彻底研究的话可以看一下官方文档，我喜欢把template放到上面，所以是这个格式，大家按自己喜欢的来就行）

但是怎么用呢

我们先先打开APP.vue（我们打开网页时所能看见的初始内容就是它（根页面））

为了方便引用我们改造一下APP.vue，让它只显示我们需要的

（特别注意：如果以下的代码填入vscode一直报错并且错误显示"CR"的话点击vscode下面的CRLF之后选择为LF即可

大概意思就是

你和你的团队用一种特殊的符号来标记句子的结尾。如果大家都用“句号”（.），那么一切都很清晰。但如果有人用“句号 + 逗号”（.，）来标记结尾，就会显得很奇怪，甚至让人困惑。

在代码中，LF 就像是“句号”，而 CRLF 就像是“句号 + 逗号”。工具 ESLint 和 Prettier希望大家都用“句号”来保持一致性。）

结果是这样

<template><div id="basic-layout">demo</div></template><style scoped></style><script setup lang="ts"></script>

成功显示内容后，我们接下来就引用Element Plus的布局

直接在BasicLayout中复制粘贴即可

<template><div id="basic-layout"><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></div></template><style scoped></style><script setup lang="ts"></script>

结果如下

可以看到成功了，但是非常简陋，接下来我们要做的就是美化和添加对应的功能

在本文开头的时候就讲到我们上中下布局的各个模块内容，接下来我们先来进行"下"的开发

先进行"下"开发是因为最方便，可以让我们快速了解布局的调试，毕竟"下"只要官方备案号，电话，邮箱等就行

直接看结果（因为只是基本的html，css类型内容，所以直接看代码更方便，更容易理解）

<template><div id="basic-layout"><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer class="footer"> 电话:123456 <br />地址:123456 </el-footer></el-container></div></template><style scoped>#basic-layout .footer {background: #94ec94;text-align: center;position: fixed;bottom: 0;left: 0;right: 0;padding: 10px;}</style><script setup lang="ts"></script>

接下来我们进行"中"的开发（不先开发"上"是因为先开发"中"后可以根据实际的页面容量来设计）

接下来我们先来了解一个新的内容-动态替换

介绍:前端动态替换是指在网页加载完成后，通过前端技术（如JavaScript等）动态地修改页面的内容、样式或结构，而无需重新加载整个页面。

（了解爬虫的朋友应该知道抓取动态页面的痛苦，所以动态替换有一定的反爬虫能力）

动态替换有优点也有缺点，大家根据实际情况来

项目	优势	劣势
用户体验	- 页面无需重新加载，用户操作更流畅，减少等待时间，提升交互体验。例如在社交媒体中动态加载新消息，用户无需刷新页面即可查看最新动态。	- 如果动态替换逻辑复杂或数据量过大，可能会导致页面卡顿或响应延迟，反而降低用户体验。比如在大量数据动态更新时，页面可能会出现短暂的卡顿。
性能优化	- 减少服务器请求次数，仅请求需要更新的部分数据，降低服务器负载和网络带宽消耗。例如在电商网站中，仅动态加载商品详情页的部分内容，而不是重新加载整个页面。	- 前端代码复杂度增加，需要更多的 JavaScript 处理逻辑来实现动态替换，可能会增加前端资源的消耗，如内存占用增加。
开发难度	- 提供灵活更的交互方式，能够实现复杂的页面效果，如动态图表、实时数据展示等，满足多样化的业务需求。	- 开发和调试难度较大，需要熟悉前端框架和数据交互技术，需要处理各种边界情况和兼容性问题。
维护成本	- 动态替换的代码可以集中管理和复用，便于维护和更新。例如在多个页面中使用相同的动态加载组件，只需修改组件代码即可实现全局更新。	- 如果动态替换逻辑涉及多个模块或组件，可能会导致代码耦合度增加，后期维护时需要花费更多精力去理解和修改代码。
搜索引擎优化（SEO）	- 动态内容可能不利于搜索引擎爬取，因为搜索引擎通常对静态内容的抓取效果更好。如果动态替换的内容是重要的页面信息，可能会影响页面的搜索引擎排名。	- 通过一些技术手段，如服务器端渲染（SSR）或预渲染，可以部分解决动态内容对 SEO 的影响，但会增加开发和部署的复杂性。
兼容性	- 现代浏览器对前端动态技术的支持较好，能够实现丰富的交互效果。	- 在一些老旧浏览器或移动端设备上，可能会出现兼容性问题，导致动态替换功能失效或显示异常。

在本篇文章中我们会用到动态替换，以方便各位朋友了解vue3的替换方法

我们在router目录的index.ts中使用

我们先来分析一下初始内容，以方便我们使用它，当然了，想要深入研究可以看官方文档

在此之前先解释一下什么是路由，之前的几篇文章中也提到过，但是由于不涉及所以没说，在这里我们了解一下

首先，这里的路由和你知道的路由器是雷锋和雷峰塔的区别，虽然名字里都有"路由"二字但是概念上毫不沾边

概念上，路由就像我们生活中的道路，你的目的地是学校，那你就要走相关的道路才能到，不然反而是南辕北辙，路由就是这样，根据具体目标，设置相关"道路"帮助我们更方便快捷的到达目的地（虽然是自己选路）

// 导入 Vue Router 相关模块import { createRouter, createWebHistory } from "vue-router";// 导入页面组件import HomeView from "../views/HomeView.vue";import AboutView from "../views/AboutView.vue";// 定义路由规则const routes = [{path: "/", // 路径为根路径name: "home", // 路由名称为 "home"component: HomeView, // 对应的组件是 HomeView},{path: "/about", // 路径为 "/about"name: "about", // 路由名称为 "about"component: AboutView, // 对应的组件是 AboutView},];// 创建路由实例const router = createRouter({history: createWebHistory(process.env.BASE_URL), // 使用 Web History 模式，base URL 从环境变量获取routes, // 将上面定义的路由规则传递给路由实例});// 导出路由实例供其他组件使用export default router;

我们先来简单的调用一个试一试

BasicLayout中的"中"也就是Main替换为 <RouterView />（下面的美化过，所以比之前的好看，代码也有改变）

<template><div id="basic-layout"><el-container><el-header>Header</el-header><el-main class="main"><RouterView /></el-main><el-footer class="footer"> 电话:123456 <br />地址:123456 </el-footer></el-container></div></template><style scoped>#basic-layout .footer {background: #94ec94;text-align: center;position: fixed;bottom: 0;left: 0;right: 0;padding: 10px;}#basic-layout .main {padding: 15px;margin-bottom: 50px;background: linear-gradient(to right, #e36f6f, #5c6d9f);}</style><script setup lang="ts"></script>

我们来看一下

可以看到HomeView的内容显示到"中"了

我们把url加入about

接下来我们开发"上"

由于"上"的导航栏内容涉及的功能会非常多，为了后期维护我们需要在Layout里再新建一个vue文件，我这里命名为NavigationBar（翻译：导航栏）

注意：一定要多词，不能是Navigation这样的单词，ESLint规则要求组件名称应该是多词的。这是为了防止与HTML内置元素名称冲突，提高代码的可读性和可维护性。（当然你可以自己设置ESLint规则）

初始内容还是

<template><div>id="basic-layout">demo<</div></template><style scoped></style><script setup lang="ts"></script>

那么导航栏怎么开发呢，我们还是要用到Element Plus的组件

链接：https://element-plus.org/zh-CN/component/menu.html

在本文中会使用"顶栏"

代码如下

<template><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"><el-menu-item index="1">Processing Center</el-menu-item><el-sub-menu index="2"><template #title>Workspace</template><el-menu-item index="2-1">item one</el-menu-item><el-menu-item index="2-2">item two</el-menu-item><el-menu-item index="2-3">item three</el-menu-item><el-sub-menu index="2-4"><template #title>item four</template><el-menu-item index="2-4-1">item one</el-menu-item><el-menu-item index="2-4-2">item two</el-menu-item><el-menu-item index="2-4-3">item three</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="3" disabled>Info</el-menu-item><el-menu-item index="4">Orders</el-menu-item></el-menu><div class="h-6" /></template><style scoped></style><script setup lang="ts">import { ref } from "vue";const activeIndex = ref("1");const handleSelect = (key: string, keyPath: string[]) => {console.log(key, keyPath);};</script>

接下来在BasicLayout.vue文件中引入导航栏内容，然后美化一下

<template><div id="basic-layout"><el-container><el-header class="header"><NavigationBar /></el-header><el-main class="main"><RouterView /></el-main><el-footer class="footer"> 电话:123456 <br />地址:123456 </el-footer></el-container></div></template><style scoped>#basic-layout .footer {background: #94ec94;text-align: center;position: fixed;bottom: 0;left: 0;right: 0;padding: 10px;}#basic-layout .main {padding: 15px;margin-bottom: 50px;background: linear-gradient(to right, #e36f6f, #5c6d9f);}#basic-layout .header {padding-inline: 10px;margin-bottom: 10px;}</style><script setup lang="ts">import NavigationBar from "./NavigationBar.vue";</script>

至于导航栏的内容设置，我们在Navigation.vue中调整就行，和传统的css差不多，在此便不过多赘述，如果有问题请在评论区发表或私信

现在"上""中""下"全部搞定

至此，VUE3的页面布局内容完成，不是很难，但是对基本功的要求很高，如果没有一定的熟练度想要熟悉开发比较费劲

注意：本系列还未结束，请持续关注本栏目以继续学习