• 快速上手
    • 使用 vue-cli@3
    • 使用 Starter Kit
    • 引入 Element
      • 完整引入
      • 按需引入
    • 全局配置
    • 开始使用
    • 使用 Nuxt.js

    快速上手

    本节将介绍如何在项目中使用 Element。

    使用 vue-cli@3

    我们为新版的 vue-cli 准备了相应的 Element 插件,你可以用它们快速地搭建一个基于 Element 的项目。

    使用 Starter Kit

    我们提供了通用的项目模板,你可以直接使用。对于 Laravel 用户,我们也准备了相应的模板,同样可以直接下载使用。

    如果不希望使用我们提供的模板,请继续阅读。

    引入 Element

    你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

    完整引入

    在 main.js 中写入以下内容:

    1. import Vue from 'vue';
    2. import ElementUI from 'element-ui';
    3. import 'element-ui/lib/theme-chalk/index.css';
    4. import App from './App.vue';
    5. Vue.use(ElementUI);
    6. new Vue({
    7. el: '#app',
    8. render: h => h(App)
    9. });

    以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。

    按需引入

    借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

    首先,安装 babel-plugin-component:

    1. npm install babel-plugin-component -D

    然后,将 .babelrc 修改为:

    1. {
    2. "presets": [["es2015", { "modules": false }]],
    3. "plugins": [
    4. [
    5. "component",
    6. {
    7. "libraryName": "element-ui",
    8. "styleLibraryName": "theme-chalk"
    9. }
    10. ]
    11. ]
    12. }

    接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

    1. import Vue from 'vue';
    2. import { Button, Select } from 'element-ui';
    3. import App from './App.vue';
    4. Vue.component(Button.name, Button);
    5. Vue.component(Select.name, Select);
    6. /* 或写为
    7. * Vue.use(Button)
    8. * Vue.use(Select)
    9. */
    10. new Vue({
    11. el: '#app',
    12. render: h => h(App)
    13. });

    完整组件列表和引入方式(完整组件列表以 components.json 为准)

    1. import Vue from 'vue';
    2. import {
    3. Pagination,
    4. Dialog,
    5. Autocomplete,
    6. Dropdown,
    7. DropdownMenu,
    8. DropdownItem,
    9. Menu,
    10. Submenu,
    11. MenuItem,
    12. MenuItemGroup,
    13. Input,
    14. InputNumber,
    15. Radio,
    16. RadioGroup,
    17. RadioButton,
    18. Checkbox,
    19. CheckboxButton,
    20. CheckboxGroup,
    21. Switch,
    22. Select,
    23. Option,
    24. OptionGroup,
    25. Button,
    26. ButtonGroup,
    27. Table,
    28. TableColumn,
    29. DatePicker,
    30. TimeSelect,
    31. TimePicker,
    32. Popover,
    33. Tooltip,
    34. Breadcrumb,
    35. BreadcrumbItem,
    36. Form,
    37. FormItem,
    38. Tabs,
    39. TabPane,
    40. Tag,
    41. Tree,
    42. Alert,
    43. Slider,
    44. Icon,
    45. Row,
    46. Col,
    47. Upload,
    48. Progress,
    49. Spinner,
    50. Badge,
    51. Card,
    52. Rate,
    53. Steps,
    54. Step,
    55. Carousel,
    56. CarouselItem,
    57. Collapse,
    58. CollapseItem,
    59. Cascader,
    60. ColorPicker,
    61. Transfer,
    62. Container,
    63. Header,
    64. Aside,
    65. Main,
    66. Footer,
    67. Timeline,
    68. TimelineItem,
    69. Link,
    70. Divider,
    71. Image,
    72. Calendar,
    73. Backtop,
    74. PageHeader,
    75. CascaderPanel,
    76. Loading,
    77. MessageBox,
    78. Message,
    79. Notification
    80. } from 'element-ui';
    81. Vue.use(Pagination);
    82. Vue.use(Dialog);
    83. Vue.use(Autocomplete);
    84. Vue.use(Dropdown);
    85. Vue.use(DropdownMenu);
    86. Vue.use(DropdownItem);
    87. Vue.use(Menu);
    88. Vue.use(Submenu);
    89. Vue.use(MenuItem);
    90. Vue.use(MenuItemGroup);
    91. Vue.use(Input);
    92. Vue.use(InputNumber);
    93. Vue.use(Radio);
    94. Vue.use(RadioGroup);
    95. Vue.use(RadioButton);
    96. Vue.use(Checkbox);
    97. Vue.use(CheckboxButton);
    98. Vue.use(CheckboxGroup);
    99. Vue.use(Switch);
    100. Vue.use(Select);
    101. Vue.use(Option);
    102. Vue.use(OptionGroup);
    103. Vue.use(Button);
    104. Vue.use(ButtonGroup);
    105. Vue.use(Table);
    106. Vue.use(TableColumn);
    107. Vue.use(DatePicker);
    108. Vue.use(TimeSelect);
    109. Vue.use(TimePicker);
    110. Vue.use(Popover);
    111. Vue.use(Tooltip);
    112. Vue.use(Breadcrumb);
    113. Vue.use(BreadcrumbItem);
    114. Vue.use(Form);
    115. Vue.use(FormItem);
    116. Vue.use(Tabs);
    117. Vue.use(TabPane);
    118. Vue.use(Tag);
    119. Vue.use(Tree);
    120. Vue.use(Alert);
    121. Vue.use(Slider);
    122. Vue.use(Icon);
    123. Vue.use(Row);
    124. Vue.use(Col);
    125. Vue.use(Upload);
    126. Vue.use(Progress);
    127. Vue.use(Spinner);
    128. Vue.use(Badge);
    129. Vue.use(Card);
    130. Vue.use(Rate);
    131. Vue.use(Steps);
    132. Vue.use(Step);
    133. Vue.use(Carousel);
    134. Vue.use(CarouselItem);
    135. Vue.use(Collapse);
    136. Vue.use(CollapseItem);
    137. Vue.use(Cascader);
    138. Vue.use(ColorPicker);
    139. Vue.use(Transfer);
    140. Vue.use(Container);
    141. Vue.use(Header);
    142. Vue.use(Aside);
    143. Vue.use(Main);
    144. Vue.use(Footer);
    145. Vue.use(Timeline);
    146. Vue.use(TimelineItem);
    147. Vue.use(Link);
    148. Vue.use(Divider);
    149. Vue.use(Image);
    150. Vue.use(Calendar);
    151. Vue.use(Backtop);
    152. Vue.use(PageHeader);
    153. Vue.use(CascaderPanel);
    154. Vue.use(Loading.directive);
    155. Vue.prototype.$loading = Loading.service;
    156. Vue.prototype.$msgbox = MessageBox;
    157. Vue.prototype.$alert = MessageBox.alert;
    158. Vue.prototype.$confirm = MessageBox.confirm;
    159. Vue.prototype.$prompt = MessageBox.prompt;
    160. Vue.prototype.$notify = Notification;
    161. Vue.prototype.$message = Message;

    全局配置

    在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 sizezIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:

    完整引入 Element:

    1. import Vue from 'vue';
    2. import Element from 'element-ui';
    3. Vue.use(Element, { size: 'small', zIndex: 3000 });

    按需引入 Element:

    1. import Vue from 'vue';
    2. import { Button } from 'element-ui';
    3. Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
    4. Vue.use(Button);

    按照以上设置,项目中所有拥有 size 属性的组件的默认尺寸均为 ‘small’,弹框的初始 z-index 为 3000。

    开始使用

    至此,一个基于 Vue 和 Element 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。

    使用 Nuxt.js

    我们还可以使用 Nuxt.js: