vue+iview 初学基础

1.iview的Row标签在浏览器里面是解析为 ivu-row 的class Rol标签解读为 ivu-rol

2.属性（待补充）

gutter： 指定栏与栏之间的间隔，默认为零。 用法 <Row :gutter="20"></Row>

3. （此内容部分参考 作者：_dalianmiao 地址 https://blog.csdn.net/hani_wen/article/details/80975772 ）

在非 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 
以下组件，在所有模式下，必须加前缀 i-，除非使用 iview-loader： 

iview-loader：统一 iView 标签书写规范，所有标签都可以使用首字母大写的形式，包括 Vue 限制的两个标签 Switch 和 Circle。虽然不推荐，但通过 loader 选项配置，可以开启所有标签前缀的写法了，比如 i-date-picker。

Switch: i-switch 
Circle: i-circle 

2.因为iView 的所有组件文案默认使用的是中文，通过设置可以使用其它语言。 
在 Webpack 中使用 # 
完整引入 iView

import Vue from 'vue';
import iView from 'iview';
import locale from 'iview/dist/locale/en-US';
4.栅格 
采用了24栅格系统，将区域进行24等分 
使用row在水平方向创建一行 
将一组col插入在row中 
在每个col中，键入自己的内容 
通过设置col的span参数，指定跨越的范围，其范围是1到24 
每个row中的col总和应该为24 
水平排列的布局。 
col必须放在row里面。

使用报错： 
Parsing error: x-invalid-end-tag : 
问题原因 
iView将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。 
解决方案 
修改配置文件，忽略该项检查：

根目录下 - .eslintrc.js - rules 
添加一行：

'vue/no-parsing-error': [2, { "x-invalid-end-tag": false }]
重启dev： npm run dev

组件概述 # 
Layout：布局容器，其下可嵌套 HeaderSiderContentFooter或 Layout 本身，可以放在任何父容器中。 
Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。 
Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。 
Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。 
Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。