目标

使用Vue+ElementUI构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。

效果页面

比如我们要实现这样列表、新增、编辑三个页面：

列表页面

新增页面

编辑页面

安装element

我们使用 vue-cli@3 进行安装

vue add element

列表组件(TodoListWithUI.vue)

与我们上次讲的无UI的列表组件逻辑基本都是一样的，我们这里主要用到了el-table，el-button这两个UI组件，至于UI组件的用法我们这里就不介绍了，大家直接上官网上看示例代码就好了，我们在这里直接贴代码：

新增编辑删除

新增组件(TodoAddWithUI.vue)

我们主要用到了el-dialog，el-form，直接贴代码：

取消确定

编辑组件(TodoEditWithUI.vue)

我TodoAddWithUI基本上一样，你也可以把这两个合并成一个组件，我们为了逻辑更加清楚就分开了，直接贴代码：

取消确定

小结

目前为止，我们完成了Vue+ElementUI的CRUD，是不是还是挺简单的呀。其实你如果用其他的UI框架，操作方式也差不多。

文中用到的代码我们放在：https://github.com/zcqiand/miscellaneous/tree/master/vue

在这里我推荐一些人气比较高的UI框架：

1.Vuetify

Star 数为 11K，提供了 80 多个 Vue.js 组件，这些组件是根据谷歌 Material Design 指南实现的。Vuetify 支持所有平台上的浏览器，包括 IE11 和 Safari 9+(使用 polyfill)，并提供了 8 个 vue-cli 模板。

地址：https://github.com/vuetifyjs/vuetify

2.Quasar

Star 数超过 6K，是构建 Vue.js 响应式网站、PWA、混合移动应用和 Electron 应用的流行框架。Quasar 还支持诸如 HTML/CSS/JS 压缩、缓存清除、摇树优化(tree shaking)、源映射、代码分割和延迟加载、ES6 转码等功能。

地址：https://github.com/quasarframework/quasar

3. Vux

Star 数超过 13K，是一个流行的社区库，基于 WeUI 和 Vue 2.0。该库还支持 webpack+vue-loader+vux 的工作流。它的文档也是中文的。

地址：https://github.com/airyland/vux

4. iView

Star 数将近 16K，提供了数十种用 Vue.js 构建的 UI 组件和小部件，并采用了干净而优雅的设计。iView 被广泛采用，社区也在积极维护，并提供了 CLI 工具用于以可视化的方式创建项目。这个也值得一试。

地址：https://github.com/iview/iview

5.Mint UI

Star 数超过 11K，为 Vue.js 提供 UI 元素，提供了用于构建移动应用程序的 CSS 和 JS 组件。当全部导入时，压缩后的代码只有月 30KB(JS+CSS)，当然它也支持单个组件的导入。

地址：https://github.com/ElemeFE/mint-ui/

6.Ant Design Vue

Star 数约 1.5K，用于开发具有数十个 Ant Design 实现组件的企业级后端产品，并支持基于 Webpack 调试的构建解决方案(支持 ES6)。请注意，它的开发已经停止了一段时间。

地址：https://github.com/okoala/vue-antd

semantic ui中文文档_一起学Vue：UI框架(element-ui)相关推荐

semantic ui中文文档_求你别再用swagger了，给你推荐几个在线文档生成神器
开局先推荐: Java面试刷题网站www.javazhiyin.com 前言最近公司打算做一个openapi开放平台,让我找一款好用的在线文档生成工具,具体要求如下: 必须是开源的能够实时生成在 ...
pyppeteer有java版本吗_Pyppeteer中文文档_序言_安装_基本使用及注意事项
Pyppeteer中文文档_序言_安装_基本使用及注意事项 Pyppeteer是Puppeteer Javascript(无头) chrome/chromium 浏览器自动化库的Python非官方端口 ...
semantic ui中文文档_Vuetify-广受欢迎的Material风格的开源UI框架
全世界范围内广受欢迎的 Vue UI 框架,一个非常精致的 Material Design UI 套件. Material Design 风格 UI 框架 Vuetify 是一个基于 Vue.js 精 ...
springboot中文文档_登顶 Github 的 Spring Boot 仓库!艿艿写的最肝系列
源码精品专栏中文详细注释的开源项目 RPC 框架 Dubbo 源码解析网络应用框架 Netty 源码解析消息中间件 RocketMQ 源码解析数据库中间件 Sharding-JDBC 和 My ...
aspose excel中文文档_除了VBA，还有哪些编程语言可以操作Excel文件？
Excel(Microsoft office)是现在最常用的办公软件,主要涉及电子表格制作.数据处理.报表输出展示以及更高端的还有金融建模等:我们知道,在需要批处理多个Excel工作表以及工作簿的时候 ...
springboot 中文文档_比Swagger还好用的自动生成接口文档工具
JApiDocs是一个无需额外注解.开箱即用的SpringBoot接口文档生成工具. 编写和维护API文档这个事情,对于后端程序员来说,是一件恼人但又不得不做的事情,我们都不喜欢写文档,但除非项目前后 ...
springboot 中文文档_还在用 Swagger生成接口文档？我推荐你试试它
JApiDocs是一个无需额外注解.开箱即用的SpringBoot接口文档生成工具. 编写和维护API文档这个事情,对于后端程序员来说,是一件恼人但又不得不做的事情,我们都不喜欢写文档,但除非项目前后 ...
keras中文文档_【DL项目实战02】图像识别分类——Keras框架+卷积神经网络CNN（使用VGGNet）
版权声明:小博主水平有限,希望大家多多指导. 目录: [使用传统DNN] BG大龍:[DL项目实战02]图像分类--Keras框架+使用传统神经网络DNNzhuanlan.zhihu.com [使用 ...
flask中文文档_「Flask系列」初识Flask
引子作者有多年的编程打杂经验,之前一直参与基于Java的各种项目以及产品规划与设计,后因自己创业维持一家小公司,有些项目与产品,想降低开发成本,故在公司内部推行基于Python Flask的后端开发 ...
vuetify中文文档_我们为什么选择Vuetify作为前端框架
尝试了很多不同的前端框架,最终我们选择Vuetify(https://vuetifyjs.com)前端框架. 从Bootstrap开始,到iview,Buefy,elementUI,我们都是不断的尝试 ...

semantic ui中文文档_一起学Vue：UI框架(element-ui)

目标