当前位置: 首页 > news >正文

前端进阶之路-从传统前端到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的页面布局内容完成,不是很难,但是对基本功的要求很高,如果没有一定的熟练度想要熟悉开发比较费劲

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

http://www.lryc.cn/news/583214.html

相关文章:

  • IntelliJ IDEA 2025.1.3创建不了java8的项目
  • 【PTA数据结构 | C语言版】大整数相加运算
  • Linux驱动05 --- TCP 服务器
  • PostgreSQL如何进行跨服务器迁移数据
  • 70、【OS】【Nuttx】【构建】配置 stm32 工程
  • OpenGL 生成深度图与点云
  • 记一次接口优化历程 CountDownLatch
  • 景观桥 涵洞 城门等遮挡物对汽车安全性的影响数学建模和计算方法,需要收集那些数据
  • 【软件运维】前后端部署启动的几种方式
  • Live555-RTSP服务器
  • Linux——I/O复用
  • 零知开源——STM32F407VET6驱动SHT41温湿度传感器完整教程
  • Linux 中的 .bashrc 是什么?配置详解
  • Python 初识网络爬虫:从概念到实践
  • 什么是公链?
  • 微软 Bluetooth LE Explorer 实用工具的详细使用分析
  • 新零售“云化”进化:基于定制开发开源AI智能名片S2B2C商城小程序的探索
  • 【视频观看系统】- 技术与架构选型
  • HashMap源码分析:put与get方法详解
  • 爬楼梯及其进阶
  • Kubernetes 存储入门
  • 由 DB_FILES 参数导致的 dg 服务器无法同步问题
  • 搭建一款结合传统黄历功能的日历小程序
  • 汽车智能化2.0引爆「万亿蛋糕」,谁在改写游戏规则?
  • A1220LUA-T Allegro高精度霍尔效应开关 车规+极致功耗+全极触发 重新定义位置检测标准
  • 【Gin】HTTP 请求调试器
  • 微软官方C++构建工具:历史演变、核心组件与现代实践指南
  • Rust与Cypress应用
  • 在Ubuntu上安装配置 LLaMA-Factory
  • 人工智能-基础篇-27-模型上下文协议--MCP到底怎么理解?对比HTTP的区别?