Element UI introduction

Element UI introduction

        Element UI is a set of business independent UI component library based on vue. It provides rich PC side components, reduces users' encapsulation of common components and reduces the difficulty of development.

Relationship between vue and element UI

• Element UI is a component library based on vue encapsulation, which simplifies the encapsulation of common components and improves the principle of reusability;
• vue is a progressive framework, and element UI is a component library;

Getting started installation

Method 1: npm installation

Recommended use npm It can be installed in a better way webpack Use with packaging tools.

npm install element-ui -S
// cnpm mode is also available

Mode 2: CDN introduction

At present, you can get the latest version of resources through unpkg.com/element-ui. You can start using js and css files on the page.

<!-- Import style -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- Import component library -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

Introducing Element

Complete introduction

Write the following in 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)
});

The above code completes the introduction of Element. Note: style files need to be imported separately.

On demand import

With the help of Babel plugin component, we can only introduce the required components to reduce the project volume.

Step 1: install Babel plugin component:

npm install babel-plugin-component -D

Step 2: modify. babelrc to:

{
 "presets": [["es2015", { "modules": false }]],
 "plugins": [
   [
     "component",
     {
       "libraryName": "element-ui",
       "styleLibraryName": "theme-chalk"
     }
   ]
 ]
}

Step 3: write corresponding contents in main.js according to the required components (for example, introduce Button component):

import Vue from 'vue';
import { Button } from 'element-ui';
import App from './App';

Vue.component(Button.name, Button);
/* Or write as
 * Vue.use(Button)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

Complete component list and introduction method

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,
  Badge,
  Card,
  Rate,
  Steps,
  Step,
  Carousel,
  CarouselItem,
  Collapse,
  CollapseItem,
  Cascader,
  ColorPicker,
  Transfer,
  Container,
  Header,
  Aside,
  Main,
  Footer,
  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(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(Container);
Vue.use(Header);
Vue.use(Aside);
Vue.use(Main);
Vue.use(Footer);

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;

Complete component list to components.json (subject to)

Global configuration

        When an Element is introduced, a global configuration object can be passed in. The object currently supports size and zIndex fields. Size is used to change the default size of the component. zIndex sets the initial z-index of the pop-up box (default: 2000). According to the method of introducing Element, the specific operations are as follows:

Complete introduction of Element:

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

Import elements as needed:

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };
Vue.use(Button);

According to the above settings, the default size of all components with size attribute in the project is' small ', and the initial z-index of the pop-up box is 3000.

Start using

So far, a development environment based on Vue and Element has been built, and you can write code now. Refer to for the usage of each component Element UI official document .