(简易)测试数据构造平台: 11 (菜单组件化)

简介: (简易)测试数据构造平台: 11 (菜单组件化)

【本节目标】菜单部分变成组件,以调用方式安插进首页


首先,我们要新建一个普通小组件,按照我们之前所学,应该放在cpmponents文件夹下,新建好后如图所示:

image.png


然后,我们把菜单代码 剪切进来,注意是剪切,剪切后的首页也就没有菜单部分了:

ToolList.vue:

image.png

此时我们也看不到这个菜单了:

image.png


粘贴后的 Menu.vue:

image.png


那么接下来,我们只需要在首页中引入调用这个Menu.vue组件 ,即可。


打开首页 ToolList.vue

首先是引入bom层:


image.png


引入之后,在bom层找到之前的aside位置写上这个组件标签:

image.png


保存,看看浏览器,是不是又可以重新看到菜单了?

image.png


好了,这就是把菜单组件化,之后在其他页面,同样以这个办法,先在Bom层导入,然后dom层写上组件名作为标签对。即可展示这个菜单喽~


欢迎大家继续追更

相关文章
|
2月前
|
关系型数据库 MySQL 测试技术
【分享】AgileTC测试用例管理平台使用分享
AgileTC 是一个脑图样式测试用例管理平台,支持用例设计、执行与团队协作,帮助测试人员高效管理测试流程。
255 116
【分享】AgileTC测试用例管理平台使用分享
|
30天前
|
安全 数据管理 测试技术
告别蛮力:让测试数据生成变得智能而高效
告别蛮力:让测试数据生成变得智能而高效
340 120
|
2月前
|
人工智能 数据可视化 测试技术
AI测试平台自动遍历:低代码也能玩转全链路测试
AI测试平台的自动遍历功能,通过低代码配置实现Web和App的自动化测试。用户只需提供入口链接或安装包及简单配置,即可自动完成页面结构识别、操作验证,并生成可视化报告,大幅提升测试效率,特别适用于高频迭代项目。
|
2月前
|
人工智能 测试技术 调度
写用例写到怀疑人生?AI 智能测试平台帮你一键生成!
霍格沃兹测试开发学社推出AI智能测试用例生成功能,结合需求文档一键生成高质量测试用例,大幅提升效率,减少重复劳动。支持自定义提示词、多文档分析与批量管理,助力测试人员高效完成测试设计,释放更多时间投入核心分析工作。平台已开放内测,欢迎体验!
|
2月前
|
人工智能 测试技术 项目管理
测试不再碎片化:AI智能体平台「项目资料套件」功能上线!
在实际项目中,需求文档分散、整理费时、测试遗漏等问题常困扰测试工作。霍格沃兹推出AI智能体测试平台全新功能——项目资料套件,可将多个关联文档打包管理,并一键生成测试用例,提升测试完整性与效率。支持套件创建、文档关联、编辑删除及用例生成,适用于复杂项目、版本迭代等场景,助力实现智能化测试协作,让测试更高效、更专业。
|
3月前
|
存储 人工智能 算法
AI测试平台实战:深入解析自动化评分和多模型对比评测
在AI技术迅猛发展的今天,测试工程师面临着如何高效评估大模型性能的全新挑战。本文将深入探讨AI测试平台中自动化评分与多模型对比评测的关键技术与实践方法,为测试工程师提供可落地的解决方案。
|
2月前
|
存储 测试技术 API
数据驱动开发软件测试脚本
今天刚提交了我的新作《带着ChatGPT玩转软件开发》给出版社,在写作期间跟着ChatGPT学到许多新知识。下面分享数据驱动开发软件测试脚本。
106 0
|
2月前
|
人工智能 自然语言处理 测试技术
AI测试平台的用例管理实践:写得清晰,管得高效,执行更智能
在测试过程中,用例分散、步骤模糊、回归测试效率低等问题常困扰团队。霍格沃兹测试开发学社推出的AI测试平台,打通“用例编写—集中管理—智能执行”全流程,提升测试效率与覆盖率。平台支持标准化用例编写、统一管理操作及智能执行,助力测试团队高效协作,释放更多精力优化测试策略。目前平台已开放内测,欢迎试用体验!
|
3月前
|
存储 人工智能 文字识别
从零开始打造AI测试平台:文档解析与知识库构建详解
AI时代构建高效测试平台面临新挑战。本文聚焦AI问答系统知识库建设,重点解析文档解析关键环节,为测试工程师提供实用技术指导和测试方法论
|
3月前
|
人工智能 安全 数据可视化
安全测试平台的选型标准与搭建思路
随着企业安全需求升级,传统漏洞扫描和渗透测试已无法满足要求。构建安全测试平台(STP)成为趋势,实现漏洞扫描、权限评估、接口测试等工作的平台化运营。本文从选型标准、平台架构、模块功能等六个方面,系统讲解如何搭建企业级安全测试平台,提升安全能力。
下一篇
oss云网关配置