vue-12-element组件库
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组件库的更多相关文章
- 【vue】vue使用Element组件时v-for循环里的表单项验证方法
转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...
- [转]VUE优秀UI组件库合集
原文链接 随着SPA.前后端分离的技术架构在业界越来越流行,前端的业务复杂度也越来越高,导致前端开发者需要管理的内容,承担的职责越来越多,这一切,使得业界对前端开发方案的思考多了很多,以react.v ...
- 基于Vue的npm组件库
前言(*❦ω❦) 思维导图可能有点高糊,有点太大了,项目和导图文件放到github或giteee上,这个思维导图也是我文章的架构,思维导图是用FeHelper插件生成的,这个是一款开源chrome插件 ...
- vue2+element组件库开发
Vue2:https://cn.vuejs.org/v2/guide/single-file-components.html element组件库:http://element-cn.eleme.io ...
- VUE:UI组件库(Mint UI & Elment)
VUE:UI组件库 常用 1)Mini UI: a 主页:http://mint-ui.github.io/#!/zh-cn b 说明:饿了么开源的基于vue的移动端UI组件库 2)Elment a ...
- 解决vue中element组件样式修改无效
vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...
- 造个自己的Vue的UI组件库类似Element
前言 随着前端的三大框架的出现,组件化的思想越来越流行,出现许多组件库.它能够帮助开发者节省时间提高效率, 如React的Ant-design,Vue的iView,Element等,它们的功能已经很完 ...
- VUE优秀的组件库总结
VUE组件库 vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/z ...
- vue.js 常用组件库
vux github ui demo:https://github.com/airyland/vux Mint UI 项目主页:http://mint-ui.github.io/#!/zh-cndem ...
- 使用vue与element组件
1.安装element npm i element-ui -S 2.引入 在main.js写入一下内容 import Vue from 'vue'; import ElementUI from 'el ...
随机推荐
- [Java基础复习] -- x. 正则表达式的使用
序号待定, 先用x占位表示 理论知识待完善, 先贴上代码 import java.util.regex.Matcher; import java.util.regex.Pattern; import ...
- ntile函数
ntile函数可以对序号进行分组处理,将有序分区中的行分发到指定数目的组中. 各个组有编号,编号从一开始. 对于每一个行,ntile 将返回此行所属的组的编号.这就相当于将查询出来的记录集放到指定长度 ...
- 性能测试---CPU内存部分
CPU内存的测试可以通过top命令来测试 ,如下是我写的bat脚本,其中的测试进程可以替换为你自己需要测试的进程. @echo offecho============================= ...
- python 变量,if,while,运算符
变量由变量名 赋值 值 a = 1 ###### 必须是一个等于号 一个等于号是赋值 变量的命名规则: 1.数字,字母,下划线组成 2.数字不能在前面 3.区分大小写 4.禁止使用python关键字 ...
- python学习笔记-调用接口
requests模块 1.get请求: url = 'http://api.nnzhp.cn/api/user/stu_info' data = {'stu_name':'小黑'} #请求数据 req ...
- 更改了ssh文件下,还没有权限
执行 cd /root/.ssh chmod 600 id_*
- MAC OS 更新GIT版本时遇到的问题
在更新git版本时,没有备份就删掉了原先的版本,在安装完2.18.0的新版本后,使用命令行git --version,返回错误git not a developer tool or in PATH. ...
- mysql5.6版本的优化
1. 目标 l 了解什么是优化 l 掌握优化查询的方法 l 掌握优化数据库结构的方法 l 掌握优化MySQL服务器的方法 2. 什么是优化? l 合理安排资源.调整系统参数使MySQL运行更快.更节省 ...
- ASP.NET Core - Razor 页面介绍
简介 随着ASP.NET Core 2 即将来临,最热门的新事物是Razor页面.在之前的一篇文章中,我们简要介绍了ASP.NET Core Razor 页面. Razor页面是ASP.NET Cor ...
- W3bsafe]SQLmap过狗命令的利用+教程
W3bsafe]SQLmap过狗命令的利用+教程 本文转自:i春秋社区 我就是那个爱装逼的小人 本屌又来装逼了 SQLmap注入的时候 有的肯定会被安全狗拦截吧 本屌来教各位过狗!过waf等安全狗 ...