大创——Vue学习|高质量前端搬砖人必会——element UI（学生管理系统前端1） html5|html|elementui|vue.js

目录

一、介绍
二、使用
2.1 安装
2.2 使用组件介绍
三、结合具体案例使用
3.1 案例效果和整体代码
?
3.2 确定页面整体布局（container布局容器）
3.3 确定导航栏
3.4 面包屑
3.5 文件上传（upload）
3.6 按钮的选择（button）
四、学习感悟
一、介绍 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
（1）element UI是基于Vue2.0的
（2）element UI提供一组组件
（3）element UI提供参考示例，可直接复制粘贴，自己稍加改造即可。（这点是我觉得最方便也最喜欢的）
二、使用 2.1 安装方法一：npm安装
官方推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。（不过对于前端小白来说，入门不建议通过这种方法）

npm i element-ui -S

方法二：CDN导入
这种方法对于小白入门来说较为友好，直接在js代码的节点中引入下面两行代码即可：

2.2 使用组件介绍 element UI中的组件主要分为这么几大类：
（1）basic：该组件的主要功能是设计页面布局，页面色彩，字体，页面边框，各类图标、按钮等
（2）form：该类组件中主要为选择框、输入框、计数器、各类选择器、滑块、开关、评分页面、文件上传页面等组件。
（3）data：包含表格、标签、进度条、分页、头像、标记等我们经常使用的用于展示或提醒信息的组件
（4）notice：顾名思义，主要是用于消息提醒的组件
（5）navigation：该类主要用于网页的整体布局，例如导航菜单、标签、页头、面包屑等
（6）others
三、结合具体案例使用 3.1 案例效果和整体代码

搜索open with live server，即可以服务器访问的形式打开HTML文件--> 学生信息管理系统 - 锐客网 Header 选项1 选项2 选项3 选项1 导航二导航三导航四首页活动管理活动列表活动详情查询全部添加点击上传点击下载批量删除 Footer

大创——Vue学习|高质量前端搬砖人必会——element UI（学生管理系统前端1）

文章图片
3.2 确定页面整体布局（container布局容器）

Header Aside Main Footer

效果如图：

文章图片

3.3 确定导航栏

默认颜色选项1 选项2 选项3 选项1 导航二导航三导航四

效果：

文章图片

3.4 面包屑

首页活动管理活动列表活动详情

文章图片

3.5 文件上传（upload）

点击上传只能上传jpg/png文件，且不超过500kb

效果：

文章图片

3.6 按钮的选择（button）

效果：需要注意的一点是按钮的图标是可以自己根据elementUI提供的icon进行更换（替换icon的内容即可）。

文章图片

四、学习感悟结合一些开源的前端组件库，极大的降低了前端页面设计和开发的门槛，通过复制粘贴和一些简单地组合修改便可以设计出一个整洁美观的前端网页。善于利用开源库和开员工具辅助设计，提高开发效率。
【大创——Vue学习|高质量前端搬砖人必会——element UI（学生管理系统前端1）】