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

今晚看了一下基于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相关推荐

十九.激光和惯导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框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...
【移动端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框架iview

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

最新文章

热门文章