(简易)测试数据构造平台: 7 (首页美化)

简介: (简易)测试数据构造平台: 7 (首页美化)

【本节目标】:引入elementUI 美化

【依赖技术】:ElementUI


   废多看崩,这就开始:


   首先我们先来理解,elementui 是什么?

   它是一个前端样式框架 。它并不唯一 , 各种漂亮的前端样式框架很多。

   如果没有这些前端样式框架,我们一样可以动手硬写css来达到效果,但是显然那样做会很麻烦,而且学习门槛很高。如果手不行的话,还不如直接田勇样式框架。

   

   它用起来是怎样的呢?

   比如,我们想做一个输入框,那么只需要在dom层写个input标签即可:

   

<input type="text" placeholder="请输入内容">

   效果如下:

   

image.png


看着很难看,但是如果引入elementUI,那么输入框就可以长这样了:

<el-input placeholder="请输入内容"></el-input>


image.png


从整体风格上看,elementui显然更简洁明了,而且使用也方便,只需要给input标签,改成el-input标签即可。其他属性基本一致。


不过,在使用elementui之前,我们需要先在我们的vue-cli前端项目中导入它。


导入过程:


1. 首先在v_project 项目根目录下执行命令:npm i element-ui -S

npm下载需要一小会时间,请耐心等待,实在不行可以换成cnpm。


2. 在main.js中引入elementUI,这个做法相当于全局生效,所有的vue组件都可以直接用elementUI 的元素了

image.png


3. 在我们的主页上写一个elementUI的输入框看看:(下面的是elementui的输入框,上面的是原生的做对比用)

image.png


效果如下:

image.png


到此,证明我们引入成功了,所以可以删掉这俩个测试用的输入框了,然后来思考我们的首页工具列表怎么设计了。


我的初步计划是,做个左侧的菜单,右侧是首页的工具列表。

相关文章
|
25天前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法
在数据驱动时代,A/B 测试成为评估机器学习项目不同方案效果的重要方法。本文介绍 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,同时提供 Python 实现示例,强调其在确保项目性能和用户体验方面的关键作用。
29 6
|
27天前
|
机器学习/深度学习 算法 UED
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段
在数据驱动时代,A/B 测试成为评估机器学习项目效果的重要手段。本文介绍了 A/B 测试的基本概念、步骤及其在模型评估、算法改进、特征选择和用户体验优化中的应用,强调了样本量、随机性和时间因素的重要性,并展示了 Python 在 A/B 测试中的具体应用实例。
28 1
|
1月前
|
人工智能 供应链 安全
AI辅助安全测试案例某电商-供应链平台平台安全漏洞
【11月更文挑战第13天】该案例介绍了一家电商供应链平台如何利用AI技术进行全面的安全测试,包括网络、应用和数据安全层面,发现了多个潜在漏洞,并采取了有效的修复措施,提升了平台的整体安全性。
|
1月前
|
监控 安全 测试技术
构建高效的精准测试平台:设计与实现指南
在软件开发过程中,精准测试是确保产品质量和性能的关键环节。一个精准的测试平台能够自动化测试流程,提高测试效率,缩短测试周期,并提供准确的测试结果。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
133 1
|
2月前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
77 2
|
2月前
|
存储 测试技术 数据库
数据驱动测试和关键词驱动测试的区别
数据驱动测试 数据驱动测试或 DDT 也被称为参数化测试。
36 1
|
1月前
|
监控 安全 测试技术
构建高效精准测试平台:设计与实现全攻略
在软件开发过程中,精准测试是确保产品质量的关键环节。一个高效、精准的测试平台能够自动化测试流程,提高测试覆盖率,缩短测试周期。本文将分享如何设计和实现一个精准测试平台,从需求分析到技术选型,再到具体的实现步骤。
64 0
|
2月前
|
机器学习/深度学习 监控 计算机视觉
目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)
本文介绍了如何使用YOLOv7进行目标检测,包括环境搭建、数据集准备、模型训练、验证、测试以及常见错误的解决方法。YOLOv7以其高效性能和准确率在目标检测领域受到关注,适用于自动驾驶、安防监控等场景。文中提供了源码和论文链接,以及详细的步骤说明,适合深度学习实践者参考。
539 0
目标检测实战(八): 使用YOLOv7完成对图像的目标检测任务(从数据准备到训练测试部署的完整流程)
|
2月前
|
机器学习/深度学习 并行计算 数据可视化
目标分类笔记(二): 利用PaddleClas的框架来完成多标签分类任务(从数据准备到训练测试部署的完整流程)
这篇文章介绍了如何使用PaddleClas框架完成多标签分类任务,包括数据准备、环境搭建、模型训练、预测、评估等完整流程。
147 0
目标分类笔记(二): 利用PaddleClas的框架来完成多标签分类任务(从数据准备到训练测试部署的完整流程)
|
2月前
|
机器学习/深度学习 数据采集 算法
目标分类笔记(一): 利用包含多个网络多种训练策略的框架来完成多目标分类任务(从数据准备到训练测试部署的完整流程)
这篇博客文章介绍了如何使用包含多个网络和多种训练策略的框架来完成多目标分类任务,涵盖了从数据准备到训练、测试和部署的完整流程,并提供了相关代码和配置文件。
64 0
目标分类笔记(一): 利用包含多个网络多种训练策略的框架来完成多目标分类任务(从数据准备到训练测试部署的完整流程)
下一篇
DataWorks