前言
iview组件库中，通过Vue.use注册了iview到项目中后，在组件内调用iview组件时默认都是通过CamelCase的方式引用iview组件的，HTML本身是大小写不敏感的，vue官网也推荐在template中使用kebab-case标签，iview官网也提供了修改的方法，具体操作如下：
- 首先通过 npm 安装 iview-loader
npm install iview-loader --save-dev- 配置 webpack（build目录下的webpack.base.conf.js文件），改写平时 vue-loader 的配置，形如：
module: {
rules: [
{
test: /.vue$/,
use: [
{
loader: 'vue-loader',
options: {
}
},
{
loader: 'iview-loader',
options: {
prefix: false
}
}
]
}
]
}- 参数 prefix 设置为 true 后，所有 iView 组件标签名都可以使用前缀 i-，例如 <i-row>、<i-select>
- 完整的标签名如下：
{
'i-affix': 'Affix',
'i-alert': 'Alert',
'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-checkbox': 'Checkbox',
'i-checkbox-group': 'CheckboxGroup',
'i-circle': 'i-circle',
'i-col': 'Col',
'i-collapse': 'Collapse',
'i-color-picker': 'ColorPicker',
'i-date-picker': 'DatePicker',
'i-dropdown': 'Dropdown',
'i-dropdown-item': 'DropdownItem',
'i-dropdown-menu': 'DropdownMenu',
'i-form': 'Form',
'i-form-item': 'FormItem',
'i-icon': 'Icon',
'i-input': 'Input',
'i-input-number': 'InputNumber',
'i-menu': 'Menu',
'i-menu-group': 'MenuGroup',
'i-menu-item': 'MenuItem',
'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-step': 'Step',
'i-steps': 'Steps',
'i-switch': 'i-switch',
'i-table': 'Table',
'i-tabs': 'Tabs',
'i-tab-pane': 'TabPane',
'i-tag': 'Tag',
'i-timeline': 'Timeline',
'i-timeline-item': 'TimelineItem',
'i-time-picker': 'TimePicker',
'i-tooltip': 'Tooltip',
'i-transfer': 'Transfer',
'i-tree': 'Tree',
'i-upload': 'Upload'
}
