#Frameworks

33,476

Element Ui

A Vue.js 2.0 UI Toolkit for Web

Install

npm install element-ui -S

Quick Start

import Vue from 'vue'
import Element from 'element-ui'

Vue.use(Element)

// or
import {
  Select,
  Button
  // ...
} from 'element-ui'

Vue.component(Select.name, Select)
Vue.component(Button.name, Button)

Import Element

You can import Element entirely, or just import what you need. Let's start with fully import.

Fully import

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)
});

On demand

With the help of babel-plugin-component, we can import components we actually need, making the project smaller than otherwise.

First, install babel-plugin-component:

npm install babel-plugin-component -D

Then edit .babelrc:

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

Next, if you need Button and Select, edit 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);
/* or
 * Vue.use(Button)
 * Vue.use(Select)
 */

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