[学习记录]ElementUI初步与组件1

ElementUI为饿了么团队开发的基于Vue2.0的桌面端组件库，组件丰富，看着美观。

在vue项目中通过npm直接安装

npm install element-ui -S

然后再main.js中增加以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

对于main.js在哪，对vue目录结构不太了解的读者可以看一下我的另一篇介绍vue的博客

本篇博客主要用来梳理elementUI框架，原文档传送门

-----------------------------------------------------------------------------------------------------------------------------------------------------

对于使用一个框架来说，我们最主要需要知道它有啥东西，能做啥。哪怕我们记不清怎么实现一个组件的功能，但是只要知道存在这个功能，就能去文档查找。因此这里列出组件的列表，做一个标记，方便查找。

<el-row><el-col>网页布局，24等分

<el-container><el-header><el-aside><el-main><el-footer>,界面容器与宏观布局，header和footer会强制container内元素纵向排列，否则横向排列

element提供了特定的六种字体，边框可以调整圆角弧度以及投影，有大量图标，

<el-button><el-button-group>按钮，有默认主题

<el-link>超链接

<el-radio-group><el-radio> <el-radio-button>单选组，可用v-model绑定数据

<el-checkbox><el-checkbox-group><el-checkbox-button>多选组，具备不确定状态属性，

<el-input>输入框，支持vue绑定值，不支持v-model的修饰符，可提示模板

<el-input-number>计数器

<el-select><el-option>选择器与选项，可多选，

<el-cascader>无option，级联选择器

<el-switch>二元开关，可以对两种状态分别进行不同的文字、颜色设置

<el-slider>滑块（like音量条），可展示标记、调横纵、带输入框、可离散

<el-time-picker>时间选择器

<el-date-picker>日期选择器,可同时进行日期与时间设定

<el-upload>文件上传

<el-rate>评分

<el-color-picker>选色

<el-transfer>穿梭框