【融职培训】Web前端学习第7章 Vue基础教程12 elementUI

本文介绍了ElementUI，一个基于Vue的UI库，包括其安装、常用组件如表单和表格的使用，以及如何通过ElementUI实现用户注册功能和表格数据操作。适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、elementUI概述

elementUI是一个基于Vue的UI库。学习UI库最简单的方式就是去看它的文档。

二、安装 elementUI

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
在项目的根目录打开命令行输入：

npm install element-ui --save

 1 import Vue from "vue";
 2 import App from "./App.vue";
 3 import ElementUI from "element-ui";
 4 import "element-ui/lib/theme-chalk/index.css";
 5 
 6 Vue.use(ElementUI); 
 7 
 8 new Vue({
 9   el: "#app",
10   render: h => h(App)
11 });

安装完成之后，就可以像下面的示例代码一样，直接使用elementUI提供的组件了。

<el-button>默认按钮</el-button>

三、常用组件介绍

表单组件

表格组件

消息提示

总结

关于elementUI的组件，了解一些常用的即可，以后工作中，随时都可以根据需求去查找文档。

四、课后练习

使用ElementUI实现一个用户注册功能，点击注册按钮，在控制台输出所有注册用户的信息，信息具体内容如下：
1. 用户名
2. 密码
3. 邮箱
4. 性别
5. 兴趣爱好：篮球、足球、羽毛球。

使用ElementUI实现一个表格数据的添加与删除。

【融职教育】在工作中学习，在学习中工作