今晚看了一下基于vuejs的ui框架iview，感覺UI挺好看的，那么在vue項目中應該如何使用iview呢？以下做簡單的記錄。

首先安裝iview：

$ npm install iview --save
在main.js中添加如下代碼：

import iView from 'iview'; import 'iview/dist/styles/iview.css';Vue.use(iView)完成以上步驟，即可在項目中使用iView。

舉例：在項目中使用iView提供的Carousel輪播圖組件以及Page分頁組件。
代碼如下：

<template><div id="hello"><Carousel v-model="value1" autoplay loop><CarouselItem class="item-content"><img src="http://pic.nen.com.cn/500/15/34/56/15345682_610838.jpg"></CarouselItem><CarouselItem class="item-content"><img src="http://bigtu.eastday.com/img/201009/30/79/16402532895665722915.jpg"></CarouselItem><CarouselItem class="item-content"><img src="http://img1.gtimg.com/bb/pics/20510/20510566.jpg"></CarouselItem><CarouselItem class="item-content"><img src="http://www.sd.xinhuanet.com/news/yule/2017-07/07/1121280192_14993928268411n.jpeg"></CarouselItem></Carousel><Page :total="100" size="small"></Page></div> </template><script type="text/ecmascript-6"> export default {data () {return {value1: 0}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped>.item-content img{width:100%;height:200px;} </style>

運行結果：

iView官網：https://www.iviewui.com/

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。