Vue+ElementUI+Springboot（五）：引入ElementUI

前言

ElementUI是饿了么推出的UI框架，封装了大量的漂亮的组件，对于中后台管理这种界面设计没有太高要求的系统，用起来十分方便。它的缺点就是图标太少了。

一、配置和Hello World体验

1、安装elementUI

package.json添加elementUI，并执行npm install安装这个依赖：

yaml

"dependencies": {
    "element-ui": "^2.13.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "axios": "^0.19.2"
}

2、引入ElementUI

main.js中引入这个组件，主要是三句：引入组件、引入CSS、使用组件：

vue

……
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
……

……

Vue.use(ElementUI)

……

3、使用ElementUI

在HelloWorld2.vue中使用相关组件，注意这种写法是错误的：

html

<template>
  <el-button>默认按钮</el-button>
  <button :id="id" @click="handle(msg.data)">点我</button>
</template>

template只能有一个根元素，因此需要这样，用一个div包起来，当然也可以是其他的标签或者组件：

html

<template>
  <div>
    <el-button>默认按钮</el-button>
    <button :id="id" @click="handle(msg.data)">点我</button>
  </div>
</template>

这样就可以随心所欲地组合ElementUI来构成自己的页面了。

二、常用组件简介

1、Layout 布局

不要再使用float来布局了，采用layout，可以响应式地布局组件，宽度都是百分比。

2、Container 布局容器

搭建后台管理系统必备结构

3、Icon 图标

图标好用，可就是太少了：

4、Button 按钮

在设计按钮的时候，记得符合设计原则：

（1）功能主次：主要功能用primary带背景色的按钮，次要功能用默认的空白背景按钮

（2）颜色统一：减少按钮颜色变化，不要花里胡哨的

5、Link 文字链接

代替a标签

6、Form 表单组件

全都需要用：

7、 Data 数据展示

后面的管理页面必然会用到：

8、Notice 消息

代替alert的神器：

常用于分页面

10、Tips 弹框和提示

增删改查的弹框、替代title属性：

11、工具组件

按需使用：

Vue+ElementUI+Springboot（五）：引入ElementUI

前言 ​

一、配置和Hello World体验 ​

1、安装elementUI ​

2、引入ElementUI ​

3、使用ElementUI ​

二、常用组件简介 ​

1、Layout 布局 ​

2、Container 布局容器 ​

3、Icon 图标 ​

4、Button 按钮 ​

5、Link 文字链接 ​

6、Form 表单组件 ​

7、 Data 数据展示 ​

8、Notice 消息 ​

9、Navigation 导航 ​

10、Tips 弹框和提示 ​

11、工具组件 ​

前言