?官網：

http://v2.iviewui.com/docs/guide/install

介紹：iView 是一套基于 Vue.js 的開源 UI 組件庫，主要服務于 PC 界面的中后臺產品。?

npm安裝：

npm install iview --save

引入 iView：

全局引入：main.js?中如下配置

import iView from 'iview'; import 'iview/dist/styles/iview.css'; Vue.use(iView);

按需引用：

借助插件?babel-plugin-import可以實現按需加載組件，減少文件體積。首先安裝，并在文件?.babelrc?中配置

npm install babel-plugin-import --save-dev // .babelrc頁面配置 {"plugins": [["import", {"libraryName": "iview","libraryDirectory": "src/components"}]] }

按需引入組件：

import { Button, Table } from 'iview'; Vue.component('Button', Button); Vue.component('Table', Table);

Card 卡片案例：

<Card><p slot="title">平均分布</p><Row type="flex" justify="space-between"><Col :xs="24" :sm="12" :md="6" :lg="6"><div class="card bg1"><span>班級總人數</span><P>30</P></div></Col><Col :xs="24" :sm="12" :md="6" :lg="6"><div class="card bg2"><span>設備數</span><P>2</P></div></Col><Col :xs="24" :sm="12" :md="6" :lg="6"><div class="card bg3"><span>及格人數</span><P>18</P></div></Col><Col :xs="24" :sm="12" :md="6" :lg="6"><div class="card bg4"><span>良好人數</span><P>12</P></div></Col><Col :xs="24" :sm="12" :md="6" :lg="6"><div class="card bg5"><span>優異人數</span><P>4</P></div></Col></Row></Card> .card {background-size: cover;border-radius: 8px;color: #fff;cursor: pointer;padding: 15px 25px;margin: 5px 10px 10px; } .card > span {font-size: 13px; } .card > p {font-size: 30px; } .bg1 {background-image: url("../../assets/bg/1.png"); } .bg2 {background-image: url("../../assets/bg/2.png"); } .bg3 {background-image: url("../../assets/bg/3.png"); } .bg4 {background-image: url("../../assets/bg/5.png"); } .bg5 {background-image: url("../../assets/bg/4.png"); }

尺寸解釋

每行總共24個柵格，在不同尺寸的頁面上如何分配寬度比例：

名稱尺寸常用設備

xs	<768px	超小屏 如：手機
sm	≥768px	小屏幕 如：平板
md	≥992px	中等屏幕 如：桌面顯示器
lg	≥1200px	大屏幕 如：大桌面顯示器
xl	≥1920px	2k屏等

補充：使用/deep/選擇器進行修改iView的樣式?

<style lang="less" scoped>/deep/ .ivu-select-single .ivu-select-selection{height: 40px;}/deep/ .ivu-select-input {height: 40px;} </style>

總結

以上是生活随笔為你收集整理的iview使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

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