1.页面布局

使用vue框架  和elementui    

使用 layout 布局      封装了公共的   侧边栏   头部    组件     主体 部分 通过 router-view  匹配 对应 的 组件

 

列表页实现：  先通过elementui    布局好 有( card ，table ， 分页page ，日期筛选 ...)   引入 列表api   可以封装在methods 里  ，created 钩子函数首次触发，点击，搜索，日期筛选时 调用一下。参数就在 data 定义一个 params：{}，里面有pagenum，pagesize，uname。。。

 

列表页还有 编辑 删除。。。 

发现都在一个页面显得代码冗余 ，不利于后期维护 ，所以 在views 下定义components 目录 ，封装了一些 常用的页面组件，例如点击编辑出现dialog对话框，就封装了edit 组件，通过props传一个state状态   true显示 false 隐藏。

 

还封装了一些公共组件  如   table ，card  ，form 。。。

使用elementui 的table 时，每增加一列，都要增加一个column 标签，还要在模型中 添加数据，会显得代码很多，不利于后期维护，于是封装成公共组件，在src下的components里，然后全局注册一下，就可以使用了，使用封装好的table公共组件时，只要通过 props 传columns 表头 ，tableData 内容，以后添加就直接修改模型数据就可以了，