1, 官网:

http://element.eleme.io/#/zh-CN

2, 安装

npm i element-ui -S

i : install,   -S  --save-dev 的简写

3, 使用 安需饮用的方式

npm install babel-plugin-component -D

修改 .babelrc 文件

{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
"transform-vue-jsx",
"transform-runtime",
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

4, 在 main.js中引入需要的组件

// 引入 element
import { Button, Select } from 'element-ui'; Vue.component(Button.name, Button);
Vue.component(Select.name, Select);

5, 使用组件

 <el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>

更多样式去官网查看

6, 轮播图

添加 引入组件

// 引入 element
import { Button, Select, Carousel, CarouselItem, } from 'element-ui'; Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
Vue.use(Carousel)
Vue.use(CarouselItem)

template

<div>
<el-carousel :interval="" type="card">
<el-carousel-item v-for="(imgaa,index) in imgs" :key="item">
<img :src="imgaa"/>
</el-carousel-item>
</el-carousel>
</div>

定义data

data() {
return {
msg: 'Welcome to Your Vue.js App',
imgs: [
"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2889938252,3793206744&fm=173&app=25&f=JPEG?w=639&h=424&s=A5D1AB66CC0937744EE54C120100C092",
]
}
}

vue-12-element组件库的更多相关文章

  1. 【vue】vue使用Element组件时v-for循环里的表单项验证方法

    转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...

  2. [转]VUE优秀UI组件库合集

    原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...

  3. 基于Vue的npm组件库

    前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...

  4. vue2+element组件库开发

    Vue2:https://cn.vuejs.org/v2/guide/single-file-components.html element组件库:http://element-cn.eleme.io ...

  5. VUE:UI组件库(Mint UI & Elment)

    VUE:UI组件库 常用 1)Mini UI: a 主页:http://mint-ui.github.io/#!/zh-cn b 说明:饿了么开源的基于vue的移动端UI组件库 2)Elment a ...

  6. 解决vue中element组件样式修改无效

    vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...

  7. 造个自己的Vue的UI组件库类似Element

    前言 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完 ...

  8. VUE优秀的组件库总结

    VUE组件库 vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/z ...

  9. vue.js 常用组件库

    vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cndem ...

  10. 使用vue与element组件

    1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...

随机推荐

  1. day 34

    1 .内容回顾 #__author : 'liuyang' #date : 2019/4/17 0017 上午 9:01 # 利大于弊,则做之 # 会死于斯,则不去 # 2个 人 晚上 5个题 面试题 ...

  2. SAS 循环与数组

    SAS 循环与数组 SAS提供了循环语句以满足在编程中需要多次执行相同操作的情 况.有时还需要对不同的变量执行相同的操作,此时可定义SAS数组,并通过数组名和下标来引用这些变量. 1 循环 SAS循环 ...

  3. php学习备注笔记

    一: PHP内核相关 http://blog.csdn.net/ywh147/article/details/40188411 [深入PHP内核(二)——SAPI探究] http://www.nowa ...

  4. python 0228

    01 cpu 内存 硬盘 操作系统 CPU:中央处理器,相当于人大脑. 飞机 内存:临时存储数据. 8g,16g, 高铁 1,成本高. 2,断电即消失. 硬盘:长期存储大量的数据. 1T 512G等等 ...

  5. Paper | 学习多任务中的最佳分/ 合结构(十字绣结构)

    目录 1. 问题 2. 十字绣结构(Cross-stitch architecture) 3. 实验设计 论文:Cross-stitch Networks for Multi-task Learnin ...

  6. sudo -iu [用户] 命令无法正常切换到用户目录的原因

    今天干活时遇到一个问题,在sudo -iu [用户]命令执行后无法切换到用户对应的[ 用户@机器 ~$ ]命令行 .bashrc已正常配置为 if [ -f /etc/bashrc ]; then . ...

  7. python之路(九)-函数装饰器

    装饰器 某公司的基础业务平台如下: def f1(): print('这是f1业务平台') def f2(): print('这是f2业务平台') def f3(): print('这是f3业务平台' ...

  8. 携带cookie的跨域访问

    携带cookie的跨域解决方案 有的时候访问后台的请求需要携带cookie以供后台分析,比如jQuery的ajax请求: $.ajax({ url: a_cross_domain_url, xhrFi ...

  9. 画PCB

    1.AD16Design中Boardshape没有redefine board shape选项来修改板子的形状:{ 解决办法:在英文输入模式下按“1”键整个界面会变绿,此时就会有redefine bo ...

  10. 《python语言程序设计》_第6章_函数

    # 6.1_引言 程序1: 结果: Sum from 1 to 10 is 55Sum from 20 to 38 is 513Sum from 35 to 50 is 630 程序2: #程序1和2 ...