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. [Java基础复习] -- x. 正则表达式的使用

    序号待定, 先用x占位表示 理论知识待完善, 先贴上代码 import java.util.regex.Matcher; import java.util.regex.Pattern; import ...

  2. ntile函数

    ntile函数可以对序号进行分组处理,将有序分区中的行分发到指定数目的组中. 各个组有编号,编号从一开始. 对于每一个行,ntile 将返回此行所属的组的编号.这就相当于将查询出来的记录集放到指定长度 ...

  3. 性能测试---CPU内存部分

    CPU内存的测试可以通过top命令来测试 ,如下是我写的bat脚本,其中的测试进程可以替换为你自己需要测试的进程. @echo offecho============================= ...

  4. python 变量,if,while,运算符

    变量由变量名 赋值 值 a = 1 ###### 必须是一个等于号 一个等于号是赋值 变量的命名规则: 1.数字,字母,下划线组成 2.数字不能在前面 3.区分大小写 4.禁止使用python关键字 ...

  5. python学习笔记-调用接口

    requests模块 1.get请求: url = 'http://api.nnzhp.cn/api/user/stu_info' data = {'stu_name':'小黑'} #请求数据 req ...

  6. 更改了ssh文件下,还没有权限

    执行 cd /root/.ssh chmod 600 id_*

  7. MAC OS 更新GIT版本时遇到的问题

    在更新git版本时,没有备份就删掉了原先的版本,在安装完2.18.0的新版本后,使用命令行git --version,返回错误git not a developer tool or in PATH. ...

  8. mysql5.6版本的优化

    1. 目标 l 了解什么是优化 l 掌握优化查询的方法 l 掌握优化数据库结构的方法 l 掌握优化MySQL服务器的方法 2. 什么是优化? l 合理安排资源.调整系统参数使MySQL运行更快.更节省 ...

  9. ASP.NET Core - Razor 页面介绍

    简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Cor ...

  10. W3bsafe]SQLmap过狗命令的利用+教程

    W3bsafe]SQLmap过狗命令的利用+教程 本文转自:i春秋社区 我就是那个爱装逼的小人   本屌又来装逼了 SQLmap注入的时候 有的肯定会被安全狗拦截吧 本屌来教各位过狗!过waf等安全狗 ...