测试平台系列(4)项目管理页面(1)

构想

页面层级构想，目前只能想到这了，欢迎补充。
项目为入口，项目下有模块，模块下添加接口，在接口中添加用例。
先搭建页面后写接口

项目列表

功能：添加项目，列表数据展示，修改项目，进入项目到模块列表页

首先给项目列表进行分区，添加按钮块，列表数据展示块，创建两个div划分。

添加按钮

使用样式库中的el-button组件,让按钮左侧居中显示

弹框信息

点击添加，需要输入项目名称和描述内容，需要两个输入框。这里用到样式库中的Dialog 对话框

复制到页面中最外层的div下就可以了

对话框通过dialogFormVisible 来控制显示隐藏。
给button 添加绑定点击事件 将 dialogFormVisible的值改为true，会显示对话框了。

当前页面有些问题，比如标题居中显示，我想让他靠左侧显示。需要使用插槽的方式，自定义标题。

在修改下lable和input 让他们一行展示。
先给lable设置下宽度

效果有明显的改善，在修改下input的宽度就可以了
给输入框设置了宽度，靠左侧居中，还记得css用的什么属性嘛？width，float。

问题又来了，输入框变小了，但是整体的弹框有些大，需要改小下。

看起来好多了，在加个描述输入框这个弹框就可以了。

刚写完才知道，如果设置了dialog的宽度，其实不用设置input的宽度和位置。

添加功能算是完成了。接下来是项目列表。

需要用到的是样式库中的Table表格

复制代码和数据到我们的项目中

除了丑点，其他的都还好。先简单的修改下样式和内容。最后呈现的效果是这样的，勉强能用

项目管理页面添加和列表页面功能完成，下篇开始写接口。

知识点掌握：

Html

这次没有使用到新增任何原生的html标签内容，都是组件中的

Css

还是width，height，float，这样的属性。margin padding 可以了解下使用。比如button距离左侧10px的话，可以写成margin-left：10px。

Vue

了解下vue文件是由哪三部分组成的。
template 写页面
script 写数据和方法
style 写css样式
data()的使用 method方法，在vue中这是必备的基础知识。

ElementUi

这次我们用到了button按钮
表格 table