今晚看了一下基于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/