ElementUI为饿了么团队开发的基于Vue2.0的桌面端组件库,组件丰富,看着美观。
在vue项目中通过npm直接安装
npm install element-ui -S
然后再main.js中增加以下内容
1 import Vue from 'vue'; 2 import ElementUI from 'element-ui'; 3 import 'element-ui/lib/theme-chalk/index.css'; 4 import App from './App.vue'; 5 6 Vue.use(ElementUI); 7 8 new Vue({ 9 el: '#app', 10 render: h => h(App) 11 });
对于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>穿梭框