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

小道的朋友圈 03-21 496

前言：

眼前各位老铁们对“js 菜鸟”可能比较关心，姐妹们都需要学习一些“js 菜鸟”的相关文章。那么小编在网络上汇集了一些对于“js 菜鸟””的相关知识，希望各位老铁们能喜欢，大家快快来了解一下吧！

目标

使用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框架，操作方式也差不多。

文中用到的代码我们放在：

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

1.Vuetify

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

地址：

2.Quasar

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

地址：

3. Vux

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