• View UI Loader
    • 用途
    • 使用方法
      • 安装
      • 配置
      • 说明

    View UI Loader

    用途

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

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

    为什么推荐在单文件组件和字符串模板中组件名应该总是 PascalCase 的。

    使用方法

    安装

    首先通过 npm 安装 iview-loader

    1. npm install iview-loader --save-dev

    配置

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

    1. module: {
    2.     rules: [
    3.         {
    4.             test: /\.vue$/,
    5.             use: [
    6.                 {
    7.                     loader: 'vue-loader',
    8.                     options: {
    10.                     }
    11.                 },
    12.                 {
    13.                     loader: 'iview-loader',
    14.                     options: {
    15.                         prefix: false
    16.                     }
    17.                 }
    18.             ]
    19.         }
    20.     ]
    21. }

    说明

    • 可以直接写 <Switch> 和 <Circle> 这两个标签；
    • 参数 prefix 设置为 true 后，所有 iView 组件标签名都可以使用前缀 i-，例如 <i-row>、<i-select>完整的标签名如下：
    1. {
    2.     'i-affix': 'Affix',
    3.     'i-alert': 'Alert',
    4.     'i-anchor': 'Anchor',
    5.     'i-anchor-link': 'AnchorLink',
    6.     'i-auto-complete': 'AutoComplete',
    7.     'i-avatar': 'Avatar',
    8.     'i-back-top': 'BackTop',
    9.     'i-badge': 'Badge',
    10.     'i-breadcrumb': 'Breadcrumb',
    11.     'i-breadcrumb-item': 'BreadcrumbItem',
    12.     'i-button': 'Button',
    13.     'i-button-group': 'ButtonGroup',
    14.     'i-card': 'Card',
    15.     'i-carousel': 'Carousel',
    16.     'i-carousel-item': 'CarouselItem',
    17.     'i-cascader': 'Cascader',
    18.     'i-cell': 'Cell',
    19.     'i-cell-group': 'CellGroup',
    20.     'i-checkbox': 'Checkbox',
    21.     'i-checkbox-group': 'CheckboxGroup',
    22.     'i-circle': 'i-circle',
    23.     'i-col': 'Col',
    24.     'i-collapse': 'Collapse',
    25.     'i-color-picker': 'ColorPicker',
    26.     'i-content': 'Content',
    27.     'i-divider': 'Divider',
    28.     'i-date-picker': 'DatePicker',
    29.     'i-drawer': 'Drawer',
    30.     'i-dropdown': 'Dropdown',
    31.     'i-dropdown-item': 'DropdownItem',
    32.     'i-dropdown-menu': 'DropdownMenu',
    33.     'i-footer': 'Footer',
    34.     'i-form': 'Form',
    35.     'i-form-item': 'FormItem',
    36.     'i-header': 'Header',
    37.     'i-icon': 'Icon',
    38.     'i-input': 'Input',
    39.     'i-input-number': 'InputNumber',
    40.     'i-layout': 'Layout',
    41.     'i-list': 'List',
    42.     'i-list-item': 'ListItem',
    43.     'i-list-item-meta': 'ListItemMeta',
    44.     'i-menu': 'Menu',
    45.     'i-menu-group': 'MenuGroup',
    46.     'i-menu-item': 'MenuItem',
    47.     'i-sider': 'Sider',
    48.     'i-submenu': 'Submenu',
    49.     'i-modal': 'Modal',
    50.     'i-option': 'Option',
    51.     'i-option-group': 'OptionGroup',
    52.     'i-page': 'Page',
    53.     'i-panel': 'Panel',
    54.     'i-poptip': 'Poptip',
    55.     'i-progress': 'Progress',
    56.     'i-radio': 'Radio',
    57.     'i-radio-group': 'RadioGroup',
    58.     'i-rate': 'Rate',
    59.     'i-row': 'Row',
    60.     'i-select': 'Select',
    61.     'i-slider': 'Slider',
    62.     'i-spin': 'Spin',
    63.     'i-split': 'Split',
    64.     'i-step': 'Step',
    65.     'i-steps': 'Steps',
    66.     'i-switch': 'i-switch',
    67.     'i-table': 'Table',
    68.     'i-tabs': 'Tabs',
    69.     'i-tab-pane': 'TabPane',
    70.     'i-tag': 'Tag',
    71.     'i-time': 'Time',
    72.     'i-timeline': 'Timeline',
    73.     'i-timeline-item': 'TimelineItem',
    74.     'i-time-picker': 'TimePicker',
    75.     'i-tooltip': 'Tooltip',
    76.     'i-transfer': 'Transfer',
    77.     'i-tree': 'Tree',
    78.     'i-upload': 'Upload'
    79. }