黑马JavaWeb开发笔记09——ElementUI代码引入教程、Element常用组件使用（Table, Pagination, Dialog, Form）

---

前言

本篇文章是2023年最新黑马JavaWeb开发笔记09：ElementUI代码进入教程、常用组件使用的总结，帮助需要学习Web开发的朋友温故而知新。

1. ElementUI代码引入
2. 常用组件使用

---

ElementUI

• 介绍
  • Element：饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页
  • Element 提供了很多**组件（组成网页的部件）**供我们使用
    • 例如：超链接、按钮、图片、表格等等。
  • 如下图所示就是我们开发的页面和ElementUI提供的效果对比：可以发现ElementUI提供的各式各样好看的按钮
    
• 作为一个后台开发者，只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中，并且做一些修改即可。
• 其官网地址：https://element.eleme.cn/#/zh-CN

1. 快速入门（代码引入教程）

1. 首先，我们先要安装ElementUI的组件库，打开VS Code，停止之前的项目，然后在命令行输入如下命令：npm install element-ui@2.15.3

• 注意：要打开完整的文件夹，否则是找不到在集成终端打开的这个选项的
  
• 这里我直接在软件里打开终端下载会报错，需要用管理员身份打开终端找到这个项目再执行下载指令才可以，如果安装失败的朋友可以试试用管理员身份打开终端。
  
  

2. 然后我们需要在main.js这个入口js文件中引入ElementUI的组件库