目标
使用Vue+ElementUI构建一个非常简单CRUD应用程序，以便您更好地了解它的工作方式。
效果页面
比如我们要实现这样列表、新增、编辑三个页面：
列表页面
新增页面
编辑页面
安装element
我们使用 vue-cli@3 进行安装
vue add element
列表组件（TodoListWithUI.vue）
与我们上次讲的无UI的列表组件逻辑基本都是一样的，我们这里主要用到了el-table，el-button这两个UI组件，至于UI组件的用法我们这里就不介绍了，大家直接上官网上看示例代码就好了，我们在这里直接贴代码：
<template>
<div style="text-align:left">
<el-button type="text" @click="addTodo()">新增</el-button>
<el-table :data="Todos" style="width: 100%">
<el-table-column type="index" width="50">
</el-table-column>
<el-table-column prop="Name" label="名称">
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="editTodo(scope.$index)" type="text" size="small">编辑</el-button>
<el-button @click="deleteTodo(scope.$index)" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<TodoAddWithUI :dialogVisible="addDialogVisible" :selectedItem="selectedItem" @save="createTodo" @cancel="cancel"></TodoAddWithUI>
<TodoEditWithUI :dialogVisible="editDialogVisible" :selectedItem="selectedItem" @save="updateTodo" @cancel="cancel"></TodoEditWithUI>
</div>
</template>
<script>
import TodoAddWithUI from './TodoAddWithUI.vue'
import TodoEditWithUI from './TodoEditWithUI.vue'
export default {
components: {
TodoAddWithUI,
TodoEditWithUI
},
data() {
return {
selectedIndex: -1, // 选择了哪条记录
selectedItem: {}, // 选中的信息
addDialogVisible: false,
editDialogVisible: false,
Todos: [{
Name: "遛狗"
},
{
Name: "跑步"
}
]
};
},
methods: {
setTodos(arr) {
this.Todos = JSON.parse(JSON.stringify(arr));
},
addTodo() {
this.addDialogVisible = true;
},
createTodo(item) {
this.Todos.push(item);
this.setTodos(this.Todos);
this.selectedIndex = -1;
this.selectedItem = {}
this.addDialogVisible = false;
},
editTodo(index) {
this.selectedIndex = index;
this.selectedItem = JSON.parse(JSON.stringify(this.Todos[index]));
this.editDialogVisible = true;
},
updateTodo(item) {
this.Todos[this.selectedIndex] = item;
this.setTodos(this.Todos);
this.selectedIndex = -1;
this.selectedItem = {}
this.editDialogVisible = false;
},
deleteTodo(index) {
this.Todos.splice(index, 1);
this.selectedIndex = -1;
this.selectedItem = {}
},
cancel() {
this.addDialogVisible = false;
this.editDialogVisible = false;
},
}
};
</script>
新增组件（TodoAddWithUI.vue）
我们主要用到了el-dialog，el-form，直接贴代码：
<template>
<el-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">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
selectedItem: Object,
dialogVisible: Boolean,
},
methods: {
save() {
this.$emit('save', this.selectedItem);
},
cancel() {
this.$emit('cancel');
}
}
};
</script>
<style scoped>
</style>
编辑组件（TodoEditWithUI.vue）
我TodoAddWithUI基本上一样，你也可以把这两个合并成一个组件，我们为了逻辑更加清楚就分开了，直接贴代码：
<template>
<el-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">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
props: {
selectedItem: Object,
dialogVisible: Boolean,
},
methods: {
save() {
this.$emit('save', this.selectedItem);
},
cancel() {
this.$emit('cancel');
}
}
};
</script>
<style scoped>
</style>
小结
目前为止，我们完成了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