快速上手

本节将介绍如何在项目中使用 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';
  6. Vue.use(ElementUI);
  8. new Vue({
  9.   el: '#app',
  10.   render: h => h(App)
  11. });

以上代码便完成了 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';
  5. Vue.component(Button.name, Button);
  6. Vue.component(Select.name, Select);
  7. /* 或写为
  8.  * Vue.use(Button)
  9.  * Vue.use(Select)
  10.  */
  12. new Vue({
  13.   el: '#app',
  14.   render: h => h(App)
  15. });

完整组件列表和引入方式（完整组件列表以 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';
  82. Vue.use(Pagination);
  83. Vue.use(Dialog);
  84. Vue.use(Autocomplete);
  85. Vue.use(Dropdown);
  86. Vue.use(DropdownMenu);
  87. Vue.use(DropdownItem);
  88. Vue.use(Menu);
  89. Vue.use(Submenu);
  90. Vue.use(MenuItem);
  91. Vue.use(MenuItemGroup);
  92. Vue.use(Input);
  93. Vue.use(InputNumber);
  94. Vue.use(Radio);
  95. Vue.use(RadioGroup);
  96. Vue.use(RadioButton);
  97. Vue.use(Checkbox);
  98. Vue.use(CheckboxButton);
  99. Vue.use(CheckboxGroup);
  100. Vue.use(Switch);
  101. Vue.use(Select);
  102. Vue.use(Option);
  103. Vue.use(OptionGroup);
  104. Vue.use(Button);
  105. Vue.use(ButtonGroup);
  106. Vue.use(Table);
  107. Vue.use(TableColumn);
  108. Vue.use(DatePicker);
  109. Vue.use(TimeSelect);
  110. Vue.use(TimePicker);
  111. Vue.use(Popover);
  112. Vue.use(Tooltip);
  113. Vue.use(Breadcrumb);
  114. Vue.use(BreadcrumbItem);
  115. Vue.use(Form);
  116. Vue.use(FormItem);
  117. Vue.use(Tabs);
  118. Vue.use(TabPane);
  119. Vue.use(Tag);
  120. Vue.use(Tree);
  121. Vue.use(Alert);
  122. Vue.use(Slider);
  123. Vue.use(Icon);
  124. Vue.use(Row);
  125. Vue.use(Col);
  126. Vue.use(Upload);
  127. Vue.use(Progress);
  128. Vue.use(Spinner);
  129. Vue.use(Badge);
  130. Vue.use(Card);
  131. Vue.use(Rate);
  132. Vue.use(Steps);
  133. Vue.use(Step);
  134. Vue.use(Carousel);
  135. Vue.use(CarouselItem);
  136. Vue.use(Collapse);
  137. Vue.use(CollapseItem);
  138. Vue.use(Cascader);
  139. Vue.use(ColorPicker);
  140. Vue.use(Transfer);
  141. Vue.use(Container);
  142. Vue.use(Header);
  143. Vue.use(Aside);
  144. Vue.use(Main);
  145. Vue.use(Footer);
  146. Vue.use(Timeline);
  147. Vue.use(TimelineItem);
  148. Vue.use(Link);
  149. Vue.use(Divider);
  150. Vue.use(Image);
  151. Vue.use(Calendar);
  152. Vue.use(Backtop);
  153. Vue.use(PageHeader);
  154. Vue.use(CascaderPanel);
  156. Vue.use(Loading.directive);
  158. Vue.prototype.$loading = Loading.service;
  159. Vue.prototype.$msgbox = MessageBox;
  160. Vue.prototype.$alert = MessageBox.alert;
  161. Vue.prototype.$confirm = MessageBox.confirm;
  162. Vue.prototype.$prompt = MessageBox.prompt;
  163. Vue.prototype.$notify = Notification;
  164. Vue.prototype.$message = Message;

全局配置

在引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。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';
  4. Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
  5. Vue.use(Button);

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

开始使用

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

使用 Nuxt.js

我们还可以使用 Nuxt.js：

快速上手 - 图1