一起学Vue:UI框架(element-ui)

目标

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

效果页面

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

列表页面

image

新增页面

image

编辑页面

image

安装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

你可能感兴趣的:(一起学Vue:UI框架(element-ui))