iView Loader

用途

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

虽然不推荐,但通过 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: {
  9. }
  10. },
  11. {
  12. loader: 'iview-loader',
  13. options: {
  14. prefix: false
  15. }
  16. }
  17. ]
  18. }
  19. ]
  20. }

说明

  • 可以直接写 <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-menu': 'Menu',
  42. 'i-menu-group': 'MenuGroup',
  43. 'i-menu-item': 'MenuItem',
  44. 'i-sider': 'Sider',
  45. 'i-submenu': 'Submenu',
  46. 'i-modal': 'Modal',
  47. 'i-option': 'Option',
  48. 'i-option-group': 'OptionGroup',
  49. 'i-page': 'Page',
  50. 'i-panel': 'Panel',
  51. 'i-poptip': 'Poptip',
  52. 'i-progress': 'Progress',
  53. 'i-radio': 'Radio',
  54. 'i-radio-group': 'RadioGroup',
  55. 'i-rate': 'Rate',
  56. 'i-row': 'Row',
  57. 'i-select': 'Select',
  58. 'i-slider': 'Slider',
  59. 'i-spin': 'Spin',
  60. 'i-split': 'Split',
  61. 'i-step': 'Step',
  62. 'i-steps': 'Steps',
  63. 'i-switch': 'i-switch',
  64. 'i-table': 'Table',
  65. 'i-tabs': 'Tabs',
  66. 'i-tab-pane': 'TabPane',
  67. 'i-tag': 'Tag',
  68. 'i-time': 'Time',
  69. 'i-timeline': 'Timeline',
  70. 'i-timeline-item': 'TimelineItem',
  71. 'i-time-picker': 'TimePicker',
  72. 'i-tooltip': 'Tooltip',
  73. 'i-transfer': 'Transfer',
  74. 'i-tree': 'Tree',
  75. 'i-upload': 'Upload'
  76. }