vue2.0结合Element-ui实战案例
85 浏览量
2020-12-03
15:57:17
上传
评论
收藏 176KB PDF 举报
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'<br>
import 'element-ui/lib/theme-chalk/index.css'<br><br>Vue.use(ElementUI)
2.2页面布局页面布局UserInfo.vue
直接通过element-ui中table布局，把整体建构页面布局完成，
<h1>用户信息管理界面</h1>
<el-row>
<el-col :span="20" :push='2'>
<div>
<el-form :inline="true">
<el-form-item style="float: left" label="查询用户信息:">
<el-input v-model="keyUser" placeholder="查询所需要的内容......"></el-input>
</el-form-item>
评论0