iView Loader

用途

统一 iView 标签书写规范，所有标签都可以使用首字母大写的形式，包括 Vue 限制的两个标签 Switch 和 Circle。

虽然不推荐，但通过 loader 选项配置，可以开启所有标签前缀的写法了，比如 i-date-picker。

使用方法

安装

首先通过 npm 安装 iview-loader

npm install iview-loader --save-dev

配置

配置 webpack，改写平时 vue-loader 的配置，形如：

module: {

rules: [

{

test: /\.vue$/,

use: [

{

loader: 'vue-loader',

options: {

}

},

{

loader: 'iview-loader',

options: {

prefix: false

}

}

]

}

]

}

说明

可以直接写 和 这两个标签；

参数 prefix 设置为 true 后，所有 iView 组件标签名都可以使用前缀 i-，例如 、

完整的标签名如下：

{

'i-affix': 'Affix',

'i-alert': 'Alert',

'i-anchor': 'Anchor',

'i-anchor-link': 'AnchorLink',

'i-auto-complete': 'AutoComplete',

'i-avatar': 'Avatar',

'i-back-top': 'BackTop',

'i-badge': 'Badge',

'i-breadcrumb': 'Breadcrumb',

'i-breadcrumb-item': 'BreadcrumbItem',

'i-button': 'Button',

'i-button-group': 'ButtonGroup',

'i-card': 'Card',

'i-carousel': 'Carousel',

'i-carousel-item': 'CarouselItem',

'i-cascader': 'Cascader',

'i-cell': 'Cell',

'i-cell-group': 'CellGroup',

'i-checkbox': 'Checkbox',

'i-checkbox-group': 'CheckboxGroup',

'i-circle': 'i-circle',

'i-col': 'Col',

'i-collapse': 'Collapse',

'i-color-picker': 'ColorPicker',

'i-content': 'Content',

'i-divider': 'Divider',

'i-date-picker': 'DatePicker',

'i-drawer': 'Drawer',

'i-dropdown': 'Dropdown',

'i-dropdown-item': 'DropdownItem',

'i-dropdown-menu': 'DropdownMenu',

'i-footer': 'Footer',

'i-form': 'Form',

'i-form-item': 'FormItem',

'i-header': 'Header',

'i-icon': 'Icon',

'i-input': 'Input',

'i-input-number': 'InputNumber',

'i-layout': 'Layout',

'i-menu': 'Menu',

'i-menu-group': 'MenuGroup',

'i-menu-item': 'MenuItem',

'i-sider': 'Sider',

'i-submenu': 'Submenu',

'i-modal': 'Modal',

'i-option': 'Option',

'i-option-group': 'OptionGroup',

'i-page': 'Page',

'i-panel': 'Panel',

'i-poptip': 'Poptip',

'i-progress': 'Progress',

'i-radio': 'Radio',

'i-radio-group': 'RadioGroup',

'i-rate': 'Rate',

'i-row': 'Row',

'i-select': 'Select',

'i-slider': 'Slider',

'i-spin': 'Spin',

'i-split': 'Split',

'i-step': 'Step',

'i-steps': 'Steps',

'i-switch': 'i-switch',

'i-table': 'Table',

'i-tabs': 'Tabs',

'i-tab-pane': 'TabPane',

'i-tag': 'Tag',

'i-time': 'Time',

'i-timeline': 'Timeline',

'i-timeline-item': 'TimelineItem',

'i-time-picker': 'TimePicker',

'i-tooltip': 'Tooltip',

'i-transfer': 'Transfer',

'i-tree': 'Tree',

'i-upload': 'Upload'

}