文章目录

前言

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

一、配置和Hello World体验

1、安装elementUI

参考快速上手

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

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

2、引入ElementUI

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

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

……

Vue.use(ElementUI)

……

3、使用ElementUI

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

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

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

<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的神器:

9、Navigation 导航

常用于分页面

10、Tips 弹框和提示

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

11、工具组件

按需使用:


转载请注明出处http://www.bewindoweb.com/285.html | 三颗豆子
分享许可方式知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议
重大发现:转载注明原文网址的同学刚买了彩票就中奖,刚写完代码就跑通,刚转身就遇到了真爱。
你可能还会喜欢
具体问题具体杠