前言

我们会选择使用一些围绕vue的库，比如Vue-CLI、Vue-Router、Axios、Moment和Element-UI，构建前端项目案例和后端数据接口，使用json-server快速构建本地服务，方便数据的添加、删除和检查。

使用上述技术，我们将构建一个vue案例并展示效果：

以上就是我们最终要达到的所有效果。我会逐一解释。在这个博客里，我就不解释了。如果你想看，在博客里也有关于脚手架和json-server的解释。如果你想学，可以看看。

1.项目结构显示

左边的第一个是前端项目结构，第二个是json-server服务器

2.页面构建

在这种情况下，边肖使用Element-ui快速构建前端页面来提高效率。不懂的可以去官网看看

2.1安装元素-用户界面

通过npm install element-ui -S安装前端ul框架，然后在main.js中介绍

从' element-ui '导入元素ui ' br import ' element-ui/lib/theme-粉笔/index . CSS ' brbrvue . use(element ui)2.2页面布局UserInfo.vue

直接通过element-ui中的表格布局完成整体的构建页面布局，

H1用户信息管理界面/H1 El-row El-col : span=' 20 ' : push=' 2 ' div El-form : inline=' true ' El-form-item style=' float 3360 left ' label=' query user information : ' El-input v-model=KeyUser ' placeholder='查询所需内容./El-input/El-form-item El-form-item style=' float : right ' El-button type=' primary ' size=' small ' icon=' El-icon-edit-outline ' @ click=' hanldad()' add/El-button/El-form-item/El-form/div class=' table ' El-table : data=' searcheuser info(keyUser)Border style=' width : 100% ' El-table-column type=' index ' labelrow . date | moment } }/span/template/El-table-column El-table-column label=' name ' align=' center ' width=' 100 ' template slot-scope=' scope ' span { { scope。row . name } }/span/template/El-table-column El-table-column标签=' mailbox ' align=' center ' width=' 160 ' Templa