目标

使用Vue+ElementUI 构建一个非常简单的CRUD 应用程序，以帮助您更好地理解它是如何工作的。

效果页面

例如，假设您要实现三个页面：列表、添加、编辑等。

列表页

添加新页面

编辑页面

安装element

使用vue-cli@3进行安装

添加vue 元素

列表组件（TodoListWithUI.vue）

前面描述的无UI 列表组件的逻辑本质上是相同的。我们将主要使用两个UI 组件：el-table 和el-button。它没有解释如何使用UI 组件。我们将直接在这里发布代码，因此请访问官方网站并查看示例代码。

templatediv style=’text-align:left’ el-button type=’text’ @click=’addTodo()’add/el-button el-table :data=’Todos’ style=’width: 100%’ el-table-column type=’index’ width=’50’ /el-table-column el-table-column prop=’名称’ label=’name’ /el-table-column el-table-column fix=’right’ label=’ 操作’ width=’100′ 模板槽scope=’scope’ el-button @click=’editTodo(scope.$index)’ type=’text’ size=’small’edit/el-button el-button @click=’ deleteTodo(scope.$index)’ type=’text’ size=’small’Delete/el-button /template /el-table-column /el-table TodoAddWithUI :dialogVisible=’addDialogVisible’ :selectedItem=’selectedItem’ @save=’ CREATETODO ‘ @CANCEL=’ 取消’/TODOADDWITHUI TODOEDITHUI CTEDITEM ‘ @save=’ UpdateTodo ‘/todoeditwithui/Div/TemplateScriptimport todoadwithui’.Vue ‘从’./TodoEditWithUI.vue’ 导入TODOEDITWITHUI 导出默认值{Components: { TodoAddWithUI, TodoEditWithUI }, data() { return { selectedIndex: -1, //选中哪条记录selectedItem: {}, //选中信息addDialogVisible: false , editDialogVisible: false, Todos: [{ Name: ‘遛狗’ }, { Name: ‘跑步’ } ] Method: { setTodos(arr) { this.Todos=JSON.parse(JSON.stringify(arr)) }; { this .addDialogVisible=true; }, createTodo(item) { this.setTodos(this.Todos);selectedItem={} this.addDialogVisible=false }, editTodo(index) { this.selectedIndex=index; this.selectedItem=JSON.stringify(this.Todos[index]));selectedIndex]=item; this.selectedItem={} this.editDialogVisible=false }, deleteTodo(index), 1); this.selectedItem={} }, 取消() { this.editDialogVisible=false;

新增组件（TodoAddWithUI.vue）

主要使用el-dialog和el-form，直接粘贴代码。

templateel-dialog title=’待办事项（新）’ :visible.sync=’dialogVisible’ el-form el-form-item label=’名称’ el-input v-model=’selectedItem.Name’ autocomplete=’off ‘/el-input /el-form-item /el-form div slot=’footer’ class=’dialog-footer’ el-button @click=’cancel’取消/el-button el-button type=’primary’ @click=’save’OK/el-button /div/el-dialog/templatescriptexport default { props: { selectedItem: 对象，dialogVisible: Boolean, },methods: { save() { this.$emit(‘save’, this.selectedItem) ; }, cancel() { this.$emit(‘cancel’) } }};/scriptstyle 作用域/样式

编辑组件（TodoEditWithUI.vue）

我的TodoAddWithUI 基本是一样的。您也可以将这两个合并为一个组件，使逻辑更清晰，直接粘贴代码。

templateel-dialog title=’待办事项（编辑）’ :visible.sync=’dialogVisible’ el-form el-form-item label=’名称’ el-input v-model=’selectedItem.Name’ autocomplete=’off ‘ /el-input /el-form-item /el-form div slot=’footer’ class=’dialog-footer’ el-button @click=’cancel’取消/el-button el-button type=’primary’ @ click=’save’OK/el-button /div/el-dialog/templatescriptexport default { props: { selectedItem: object,dialogVisible: Boolean, },methods: { save() { this.$emit(‘save’, this.selectedItem) ; }, cancel() { this.$emit(‘cancel’) } }};/scriptstyle 作用域/样式

小结

至此，Vue+ElementUI CRUD已经完成。是不是很容易呢？事实上，使用其他UI框架时的体验是类似的。

将本文使用的代码放在这里：https://github.com/zcqiand/miscellaneous/tree/master/vue

这里我们推荐一些流行的UI框架。

1.Vuetify

它拥有11,000 颗星，并提供了超过80 个根据Google Material Design 指南实现的Vue.js 组件。 Vuetify 支持所有平台上的浏览器，包括IE11 和Safari 9+（带有polyfills），并提供8 个vue-cli 模板。

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

2.类星体

Vue.js 拥有超过6,000 颗星，是构建响应式网站、PWA、混合移动应用程序和Electron 应用程序的流行框架。 Quasar还支持HTML/CSS/JS压缩、缓存清除、Tree Shaking、源映射、代码分割和延迟加载以及ES6转码等功能。

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

3.Vux

它是一个基于WeUI 和Vue 2.0 的流行社区库，拥有超过13,000 颗星。该库还支持webpack+vue-loader+vux 工作流程。该文档也是中文的。

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

4.iView

它拥有大约16,000 颗星，提供数十个使用Vue.js 构建的UI 组件和小部件，并具有简洁优雅的设计。 iView被社区广泛采用和积极维护，并提供了以可视化方式创建项目的CLI工具。这也值得一试。

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

5.薄荷用户界面

它拥有超过11,000 颗星，为Vue.js 提供UI 元素，并提供用于构建移动应用程序的CSS 和JS 组件。导入所有内容后，压缩后的代码只有30KB（JS+CSS）。 当然，它也支持导入单个组件。

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

6.Ant设计视图

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

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