【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element

看了下iView之后，顺便看了看同样基于vuejs的ui框架Element，那么在vue项目中应该如何使用Element呢？以下做简单的记录。

官网定义：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框架Element相关推荐

十九.激光和惯导LIO-SLAM框架学习之项目工程代码介绍---代码框架和一些文件解释
专栏系列文章如下: 一:Tixiao Shan最新力作LVI-SAM(Lio-SAM+Vins-Mono),基于视觉-激光-惯导里程计的SLAM框架,环境搭建和跑通过程_goldqiu的博客-CSDN ...
十六.激光和惯导LIO-SLAM框架学习之配置自用传感器实时室外跑LIO-SAM框架
专栏系列文章如下: 一:Tixiao Shan最新力作LVI-SAM(Lio-SAM+Vins-Mono),基于视觉-激光-惯导里程计的SLAM框架,环境搭建和跑通过程_goldqiu的博客-CSDN ...
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
今晚看了一下基于vuejs的ui框架iview,感觉UI挺好看的,那么在vue项目中应该如何使用iview呢?以下做简单的记录. 首先安装iview: $ npm install iview --sa ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
html如何既能应用于pc端也能用于手机端_如何选择一个 vue ui 框架？
目录 1,比较流行的 UI 框架有哪些? 1.1 适用 PC 端 1.2 适用移动端 1.3 其它 2,vuetify 是什么,为什么选择它? 2.1 Vuetify给出的 vue ui 框架对比图 ...
vue手机端项目php,MintUI基于Vue.js移动端组件库详解
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.接下来通过本文给大家分享Mint UI 基于 Vue.js 移动端组件库,需要的朋友参考下吧,希望能帮助到大家. 官网 ...
【Vue前端开发学习】第2章，Vue项目目录结构
文章目录前言一.新增router文件夹及其配置方法二.新增store文件夹及其配置方法三.index.html.App.vue.main.js三者之间的联系前言上一章节,通过Pycha ...
【CV实战】年轻人的第一个深度学习图像分割项目应该是什么样的（Pytorch框架）？...
我们上次给新手们介绍了第一个合适入门的深度学习CV项目,可阅读[CV实战]年轻人的第一个深度学习CV项目应该是什么样的?(支持13大深度学习开源框架),本次我们再给大家介绍一个新的任务,图像分割,包括 ...
Android 框架学习4：一次读懂热门图片框架 Picasso 源码及流程
Android 框架学习1:EventBus 3.0 的特点与如何使用 Android 框架学习2:源码分析 EventBus 3.0 如何实现事件总线 Android 框架学习3:我从 EventB ...

【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element

【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element相关推荐

最新文章

热门文章