快速上手

本节将介绍如何在项目中使用 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

快速上手 - 图1