1.安装Iview

1.CDN安装

通过 unpkg.com/iview 可以看到 iView 最新版本的资源，也可以切换版本选择需要的资源，在页面上引入 js 和 css 文件即可开始使用：

<!-- import Vue.js -->

<script src="//vuejs.org/js/vue.min.js"></script>

<!-- import stylesheet -->

<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">

<!-- import iView -->

<script src="//unpkg.com/iview/dist/iview.min.js"></script>

2.NPM引入

前提安装好Node、NPM、Vue-Cli环境

npm install iview --save

Vue项目安装好后就可以开始引入Iview到项目中了

一般在 webpack 入口页面 main.js 中如下配置：
引入iview和其样式，进行全局引用

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
});

在main.js中配置好后，我们就可以在项目中使用Iview了

---

组件使用规范

使用:prop传递数据格式为 数字、布尔值或函数时，必须带:(兼容String除外，具体看组件文档)，比如：

Correct usage:
<Page :current="1" :total="100"></Page>

Incorrect usage:
<Page current="1" total="100"></Page>

在非 template/render 模式下（例如使用 CDN 引用时），组件名要分隔，例如 DatePicker 必须要写成 date-picker。

以下组件，在非 template/render 模式下，需要加前缀 i-：

• Button: i-button
• Col: i-col
• Table: i-table
• Input: i-input
• Form: i-form
• Menu: i-menu
• Select: i-select
• Option: i-option
• Progress: i-progress
• Time: i-time

以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader：

• Switch: i-switch
• Circle: i-circle

---

使用Iview

具体Api可以参考Iview官网

1.Iview布局

Iview布局与Bootstrap相比划分得更细致，采用24栅格系统，将区域进行24等分。

24栅格系统
Iview定义了两个概念，行row和列col，具体使用方法如下：

• 使用row在水平方向创建一行
• 将一组col插入在row中
• 在每个col中，键入自己的内容
• 通过设置col的span参数，指定跨越的范围，其范围是1到24
• 每个row中的col总和应该为24

2.Iview组件

Iview提供更丰富的组件（时间轴，加载进度条，气泡卡片 ，BackTop,图钉等）

以Table组件为例

<template>
    <Table stripe :columns="columns1" :data="data1"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns1: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
                data1: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04'
                    }
                ]
            }
        }
    }
</script>

第2行使用<Table>标签遵循Iview使用规范引入Table组件
stripe:表格是否显示间隔斑马纹
columns:绑定表格列名
data:绑定数据