使用 vue2.x + ElementUI 快速搭建一个后台 增删改查 管理界面

一、前言

CRUD
自从使用了 vue2.x,就不想过多地去使用其他的含 JS 代码的前端框架如 BootStrap4、jQuery 等,想全程使用 vue 去搭建前端界面,因为 vue 的生态系统十分繁荣,ui 方面的库有 element-ui、iview 等。

这次①使用了vue搭建前端页面架构,绑定数据,②使用element-ui修饰界面。

二、搭建项目架构

具体可以去看之前的一篇 vue-cli + element-ui 快速搭建项目 的文章
页面效果如下:
使用 vue2.x + ElementUI 快速搭建一个后台 增删改查 管理界面_第1张图片

三、代码编写

只需要将 App.vue修改为如下的内容即可





是不是觉得很简单?

四、小结

1、具体怎么使用 element-ui,搭建引入element-ui,可以查看 element-ui 官方文档

2、上述页面代码虽简单,但还需优化,主要是还没编写前后端交互代码。

五、拓展

2018/8/25 更新:补充了本文的 JS 交互用法
[增删改查] 使用 Vue + ElementUI + Webpack + VueRouter 做后台管理、REST 交互

你可能感兴趣的:(Vue,+,React)