html整合vue elementui,vue2.0结合Element-ui实战案例

前言

我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例，后端数据接口，会使用json-server快速搭建一个本地的服务，方便对数据的增删改查，

利用以上技术我们会搭建一个vue案例，效果展示图：

以上就是我们最终要实现的全部效果，我会一块一块的讲解，关于脚手架安装和json-server搭建，在本次博客中，不会讲解，如果想看的话，在小编的博客中，也有讲解关于脚手架搭建和json-server搭建，如果想学习的话，可以看一下。

1.项目结构展示

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

2.页面搭建

在本次案例中，小编采用Element-ui快速搭建前端页面，以提高效率。如果不了解的话，可以去官网看一下

2.1安装element-ui

通过npm install element-ui -S 安装前端ul框架，安装完之后，并在main.js引入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

2.2页面布局UserInfo.vue

直接通过element-ui中table布局，把整体建构页面布局完成，

用户信息管理界面

添加

:data="searchUserinfo(keyUser)"

border

style="width: 100%">

type="index"

label="序号"

align="center"

width="60">

label="日期"

align="center"

width="120">

{ { scope.row.date | moment}}

label="姓名"

align="center"

width="100">

{ { scope.row.name }}

label="邮箱"

align="center"

width="160">

{ { scope.row.email }}

label="标题"

align="center"

width="160">

{ { scope.row.title }}

label="评价"

align="center"

width="200">

{ { scope.row.evaluate }}

label="状态"

align="center"

width="160">

{ { scope.row.state }}

size="mini"

@click="handleEdit(scope.$index, scope.row)">编辑

size="mini"

type="danger"

@click="handleDelete(scope.$index, scope.row)">删除

2.3页面数据获取并展示

通过axios请求本地搭建的服务数据，把得到的数据展示到页面当中。

也是通过cnpm install axios --save安装并在main.js中引入

import axios from 'axios'

Vue.prototype.$axios = axios

我们需要在方法methods中定义一个getUserInfo方法，用于请求数据

data () {

return {

tableData: [], 用于存放数据

}

}

getUserInfo() {

this.$axios.get('http://localhost:3000/data').then(res => {

this.tableData = res.data

})

},

这是时候，数据是请求到了，但是页面并为展示，这就关系到vue的生命周期。如果对vue生命周期不是很了解的话，可以官网仔细看一遍，