常见名词解释:

UI:用户界面(设计的网页界面)

UE:用户体验,指的是用户访问网站,访问体验

ElementUI概述:

网站快速成型工具.(可以快速搭建网站布局网站).

是饿了么公司前段开发团队提供的一套基于Vue的网站组件库

特点:

1.它是一个前端框架,前端开发者使用它快速搭建网站

2.它的核心提供了很多组件库

3.它的组件是基于Vue框架定义的(一定要引入vue.js)

ElementUI入门

学习前准备工作:前往官网下载ElementUI官网下载工具包

官网:Element - The world's most popular Vue UI framework

总结:

1.link标签的href : 引入index.css

2.script标签的src : 引入vue.js

3.script标签的src : 引入element-ui/lib/index.js

ElementUI常用的组件(非常丰富的组件库,基于Vue框架定义的

行组件:

        基本语法:<el-row>子组件1,子组件2,子组件N</el-row>     

        特点:让子组件在一行显示

        注意:若子组件过多,会自动换行显示

按钮组件:

        基本语法:<el-button type="属性">文本<el-button>

        type属性改变按钮的样式:info,danger,warning等等

        icon属性:在按钮上显示icon图标

incon图标按钮:

基本语法:<i class="属性值"><i>

class属性不同,图标样式就不一样

form表单组件基本语法:

<el-form>

        文本输入框

        密码输入框

        单选输入框

        多选输入框

        提交按钮

        隐藏<input type="hidden">

        </el-form>

练习完整的案例:教务管理系统后端页面的布局(UI)