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

目标

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

效果页面

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

列表页面

新增页面

编辑页面

安装

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

vue add element

列表组件（.vue）

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

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

新增组件（.vue）

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

<script>
export default {
    props: {
        selectedItem: Object,
        dialogVisible: Boolean,
    },
    methods: {
        save() {
            this.$emit('save', this.selectedItem);
        },
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>
<style scoped>
</style>

编辑组件（.vue）

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

<script>
export default {
    props: {
        selectedItem: Object,
        dialogVisible: Boolean,
    },
    methods: {
        save() {
            this.$emit('save', this.selectedItem);
        },
        cancel() {
            this.$emit('cancel');
        }
    }
};
</script>
<style scoped>
</style>

小结

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

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

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

1.

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

地址：

2.

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

地址：

3. Vux

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

地址：

4. iView

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

地址：

5.Mint UI

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

地址：

6.Ant Vue

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

地址：