【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
2017-12-13 02:30
1381 查看
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录。
官网定义:Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
首先安装Element:
举例:在项目中使用Element提供的Carousel轮播图组件。
代码如下:
Element官网:http://element.eleme.io/#/zh-CN
官网定义:Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
首先安装Element:
$ npm install element-ui --save在main.js中添加如下代码:
import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)完成以上步骤,即可在项目中使用Element。
举例:在项目中使用Element提供的Carousel轮播图组件。
代码如下:
<template> <div class="hello"> <el-carousel :interval="2000" type="card" height="100px"> <el-carousel-item v-for="item in pic" :key="item"> <img class="carousel-img" :src="item.url"> </el-carousel-item> </el-carousel> </div> </template> <script type="text/ecmascript-6"> export default { data() { return { pic: [ { url: 'http://www.sd.xinhuanet.com/news/yule/2017-07/07/1121280192_14993928268411n.jpeg' }, { url: 'http://pic.nen.com.cn/500/15/34/56/15345682_610838.jpg' }, { url: 'http://b.hiphotos.baidu.com/zhidao/pic/item/9825bc315c6034a8e7235341ce13495408237629.jpg' }, { url: 'http://b.hiphotos.baidu.com/image/pic/item/64380cd7912397dd682835d65382b2b7d1a2878b.jpg' } ] } }, create() { console.log(this.data.pic) } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .carousel-img { width:100%; height:100px; } </style>运行结果:
Element官网:http://element.eleme.io/#/zh-CN
相关文章推荐
- 【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
- 【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
- Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
- vue 2.0项目中如何引入element-ui详解
- 使用ES6+vue+elementui+webpack搭建简单项目
- vue2.0基于vue-cli,element-ui饿了么vue前端开源项目制作vue的树形table,treeTable
- Vue的项目使用Element ui 走马灯 不能实现的问题
- 使用 vue-cli + element-ui 快速搭建项目
- 使用ES6+vue+elementui+webpack搭建简单项目
- 在vue项目中使用element-ui的Upload上传组件的示例
- Vue2.5学习笔记之如何在项目中使用和配置Vue
- 在vue项目中使用element-ui的Upload上传组件
- 如何将vs2012开发的基于.net framework 4.5框架的MVC4项目部署到windows server2003服务器上
- 基于MVC4+EasyUI的Web开发框架经验总结(15)--在MVC项目中使用RDLC报表
- android 项目中使用到的网络请求框架以及如何配置好接口URL
- 录制元素基于smartgwt框架项目如何开展自动化(一)
- XMPP框架 微信项目开发之CoreData学习——使用CoreData建立多个数据库
- 如何使用Maven和eclipse构建大数据开发框架项目
- 使用Eclipse开发基于SSH三大框架的Web项目带图详解
- XMPP框架 微信项目开发之CoreData学习——CoreData的基本使用