本节将介绍如何在项目中使用 Element。
使用 vue-cli@3我们为新版的 vue-cli 准备了相应的 Element 插件,你可以用它们快速地搭建一个基于 Element 的项目。
使用 Starter Kit我们提供了通用的项目模板,你可以直接使用。对于 Laravel 用户,我们也准备了相应的模板,同样可以直接下载使用。
如果不希望使用我们提供的模板,请继续阅读。
引入 Element你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
完整引入在 main.js 中写入以下内容:
import Vue from 'vue';import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI);new Vue({ el: '#app', render: h => h(App)});以上代码便完成了 Element 的引入。需要注意的是,样式文件需要单独引入。
按需引入借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D然后,将 .babelrc 修改为:
{ "presets": [["es2015", { "modules": false }]], "plugins": [[ "component", {"libraryName": "element-ui","styleLibraryName": "theme-chalk" }] ]}接下来,如果你只希望引入部分组件,比如 Button 和 Select,那么需要在 main.js 中写入以下内容:
import Vue from 'vue';import { Button, Select } from 'element-ui';import App from './App.vue';Vue.component(Button.name, Button);Vue.component(Select.name, Select);/* 或写为 * Vue.use(Button) * Vue.use(Select) */new Vue({ el: '#app', render: h => h(App)});完整组件列表和引入方式(完整组件列表以 components.json 为准)
import Vue from 'vue';import { Pagination, Dialog, Autocomplete, Dropdown, DropdownMenu, DropdownItem, Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton, Checkbox, CheckboxButton, CheckboxGroup, Switch, Select, Option, OptionGroup, Button, ButtonGroup, Table, TableColumn, DatePicker, TimeSelect, TimePicker, Popover, Tooltip, Breadcrumb, BreadcrumbItem, Form, FormItem, Tabs, TabPane, Tag, Tree, Alert, Slider, Icon, Row, Col, Upload, Progress, Spinner, Badge, Card, Rate, Steps, Step, Carousel, CarouselItem, Collapse, CollapseItem, Cascader, ColorPicker, Transfer, Container, Header, Aside, Main, Footer, Timeline, TimelineItem, Link, Divider, Image, Calendar, Backtop, PageHeader, CascaderPanel, Loading, MessageBox, Message, Notification} from 'element-ui';Vue.use(Pagination);Vue.use(Dialog);Vue.use(Autocomplete);Vue.use(Dropdown);Vue.use(DropdownMenu);Vue.use(DropdownItem);Vue.use(Menu);Vue.use(Submenu);Vue.use(MenuItem);Vue.use(MenuItemGroup);Vue.use(Input);Vue.use(InputNumber);Vue.use(Radio);Vue.use(RadioGroup);Vue.use(RadioButton);Vue.use(Checkbox);Vue.use(CheckboxButton);Vue.use(CheckboxGroup);Vue.use(Switch);Vue.use(Select);Vue.use(Option);Vue.use(OptionGroup);Vue.use(Button);Vue.use(ButtonGroup);Vue.use(Table);Vue.use(TableColumn);Vue.use(DatePicker);Vue.use(TimeSelect);Vue.use(TimePicker);Vue.use(Popover);Vue.use(Tooltip);Vue.use(Breadcrumb);Vue.use(BreadcrumbItem);Vue.use(Form);Vue.use(FormItem);Vue.use(Tabs);Vue.use(TabPane);Vue.use(Tag);Vue.use(Tree);Vue.use(Alert);Vue.use(Slider);Vue.use(Icon);Vue.use(Row);Vue.use(Col);Vue.use(Upload);Vue.use(Progress);Vue.use(Spinner);Vue.use(Badge);Vue.use(Card);Vue.use(Rate);Vue.use(Steps);Vue.use(Step);Vue.use(Carousel);Vue.use(CarouselItem);Vue.use(Collapse);Vue.use(CollapseItem);Vue.use(Cascader);Vue.use(ColorPicker);Vue.use(Transfer);Vue.use(Container);Vue.use(Header);Vue.use(Aside);Vue.use(Main);Vue.use(Footer);Vue.use(Timeline);Vue.use(TimelineItem);Vue.use(Link);Vue.use(Divider);Vue.use(Image);Vue.use(Calendar);Vue.use(Backtop);Vue.use(PageHeader);Vue.use(CascaderPanel);Vue.use(Loading.directive);Vue.prototype.$loading = Loading.service;Vue.prototype.$msgbox = MessageBox;Vue.prototype.$alert = MessageBox.alert;Vue.prototype.$confirm = MessageBox.confirm;Vue.prototype.$prompt = MessageBox.prompt;Vue.prototype.$notify = Notification;Vue.prototype.$message = Message;全局配置在引入 Element 时,可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸,zIndex 设置弹框的初始 z-index(默认值:2000)。按照引入 Element 的方式,具体操作如下:
完整引入 Element:
import Vue from 'vue';import Element from 'element-ui';Vue.use(Element, { size: 'small', zIndex: 3000 });按需引入 Element:
import Vue from 'vue';import { Button } from 'element-ui';Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };Vue.use(Button);按照以上设置,项目中所有拥有 size 属性的组件的默认尺寸均为 'small',弹框的初始 z-index 为 3000。
开始使用至此,一个基于 Vue 和 Element 的开发环境已经搭建完毕,现在就可以编写代码了。各个组件的使用方法请参阅它们各自的文档。
使用 Nuxt.js我们还可以使用 Nuxt.js: