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. }