(简易)测试数据构造平台: 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


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


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

相关文章
|
4天前
|
传感器 数据采集 算法
LabVIEW无人机大气数据智能测试系统
LabVIEW无人机大气数据智能测试系统
12 3
|
3天前
|
监控 数据挖掘 定位技术
Spartacus 测试,后台修改 product price 数据后,添加到 Cart 时,会带出来最新的价格吗
Spartacus 测试,后台修改 product price 数据后,添加到 Cart 时,会带出来最新的价格吗
16 2
|
4天前
|
数据挖掘 测试技术 网络安全
LabVIEW开发卫星测试平台
LabVIEW开发卫星测试平台
|
4天前
|
算法 物联网 5G
LabVIEW开发最小化5G系统测试平台
LabVIEW开发最小化5G系统测试平台
14 0
|
4天前
|
消息中间件 测试技术 Linux
linux实时操作系统xenomai x86平台基准测试(benchmark)
本文是关于Xenomai实时操作系统的基准测试,旨在评估其在低端x86平台上的性能。测试模仿了VxWorks的方法,关注CPU结构、指令集等因素对系统服务耗时的影响。测试项目包括信号量、互斥量、消息队列、任务切换等,通过比较操作前后的时戳来测量耗时,并排除中断和上下文切换的干扰。测试结果显示了各项操作的最小、平均和最大耗时,为程序优化提供参考。注意,所有数据基于特定硬件环境,测试用例使用Alchemy API编写。
38 0
linux实时操作系统xenomai x86平台基准测试(benchmark)
|
4天前
|
传感器 Linux 测试技术
xenomai 在X86平台下中断响应时间测试
该文讨论了实时操作系统中断响应时间的重要性,并介绍了x86中断机制和Xenomai的中断管理,包括硬件中断和虚拟中断的处理。Xenomai通过I-Pipe确保实时性,中断优先级高的Xenomai先处理中断。文中还提到了中断响应时间的测试设计,分别针对I-Pipe内核间虚拟中断和硬件中断进行了测试,并给出了在不同负载下的测试结果。
11 0
xenomai 在X86平台下中断响应时间测试
|
4天前
|
JSON 测试技术 数据格式
Elasticsearch 8.X 如何生成 TB 级的测试数据 ?
Elasticsearch 8.X 如何生成 TB 级的测试数据 ?
15 0
|
4天前
|
Linux 测试技术 数据安全/隐私保护
CentOS安装MeterSphere并实现无公网IP远程访问本地测试平台
CentOS安装MeterSphere并实现无公网IP远程访问本地测试平台
|
4天前
|
人工智能 测试技术
测试数据不再难,人工智能批量生成给你用!
本文介绍了如何利用ChatGPT生成测试数据。测试数据是验证功能和触发异常场景的关键,设计时需全面考虑等价类、边界值和正交法。实践中,先明确数据类型、格式和需求,然后向ChatGPT提供相关信息。例如,对于只能输入中国手机号的输入框,初始提示可能只包含正常手机号,但应进一步补充异常场景,如非数字、长度错误、非中国号码、特殊字符、空输入等。此外,可通过指定yaml格式来满足代码使用需求。总结来说,生成测试数据需清晰定义需求,拆分任务,并系统测试各种变化。
25 2
|
4天前
|
人工智能 监控 数据处理
【AI大模型应用开发】【LangSmith: 生产级AI应用维护平台】1. 快速上手数据集与测试评估过程
【AI大模型应用开发】【LangSmith: 生产级AI应用维护平台】1. 快速上手数据集与测试评估过程
40 0

热门文章

最新文章