看了下iView之后，順便看了看同樣基于vuejs的ui框架Element，那么在vue項(xiàng)目中應(yīng)該如何使用Element呢？以下做簡單的記錄。

官網(wǎng)定義：Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 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) 完成以上步驟，即可在項(xiàng)目中使用Element。

舉例：在項(xiàng)目中使用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>運(yùn)行結(jié)果：

Element官網(wǎng)：http://element.eleme.io/#/zh-CN

總結(jié)

以上是生活随笔為你收集整理的【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。