目录

一、简单介绍

二、安装

1、下载

2、引入

三、布局

1、简介

2、使用

3、好处

四、布局容器

1、常见排布

2、调整样式

五、按钮

1、简单引用

2、改变样式

 3、加载中效果

六、表格

1、简单使用

 2、样式修改

七、对话框

1、简单使用

2、添加自定义内容

3、认识不同写法的区别

一、简单介绍

1、提供各种组件的UI，内容，功能现成代码

2、为了快速开发，适合用于开发管理系统端（学生信息管理系统、社区人口管理系统）UI样式

二、安装

1、下载

进入项目终端，输入：

npm i element-ui -S

2、引入

在main.js文件中，引入element-ui

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';    //引入
import 'element-ui/lib/theme-chalk/index.css';    //引入Vue.config.productionTip = falseVue.use(ElementUI);    //使用new Vue({router,store,render: h => h(App)
}).$mount('#app')

三、布局

1、简介：通过基础的 24 分栏，迅速简便地创建布局【1行24列】

2、使用

（1）分两个12份，两个8份，效果如下

 （2）自定义效果

给每行加上margin: 20px;

第二行加上属性gutter: 20，会自动给该行加padding-left和padding-right各10px

3、好处：响应式，根据网页的大小自动调整容器大小

四、布局容器

1、常见排布：头部、侧边、中间栏、底部

2、调整样式

实现正好头部，中间，底部充满一个窗口

五、按钮

1、简单引用

2、改变样式

除去圆形，换掉图标

 3、加载中效果

 加载中

methods:{btnClick(){this.isClick = truesetTimeout(()=>{this.isClick = false},2000)}},

六、表格

1、简单使用

 2、样式修改

给表格加上斑马纹、纵向边框、数字列

七、对话框

1、简单使用

点击表格编辑，弹出对话框

2、添加自定义内容

添加单选框到对话框中，注意标签需要添加的属性及变量存储要放在对话框中

男女

numberValidateForm: {age: "",radio: "",//属性值绑定到对话框中
},

3、认识不同写法的区别

（1）popover弹出框

（2）template上的属性slot-scope="scope"是作用域插槽，关于作用域插槽详细学习，小伙伴们可以参考小编下面这篇文章Vue基础语法（五）_申小兮IU的博客-CSDN博客插槽的基础使用，具名插槽，作用域插槽，子组件向父组件通信总结https://blog.csdn.net/qq_51478745/article/details/127650324