element

1.8 KiB

Raw Blame History

Quickstart

Element UI is a background components library that help you develop your background projects faster and easier.

Install

$ npm install element-ui@next --save

Register components

Import all element-ui components

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

// use Vue.use to register a plugin
Vue.use(element)

Or just import some components you need

use babel-plugin-component

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

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

And it will be converted to

import Select from 'element-ui/lib/select';
import 'element-ui/lib/theme-default/select.css';
import Button from 'element-ui/lib/button';
import 'element-ui/lib/theme-default/button.css';

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

Use babel-plugin-component

Configure .bablerc

{
  "plugins": ["xxx", ["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-default"
    }
  ]]]
}

Import components by <style> and <script> tags

Be careful, import vue.js before element, just like if you want to use a jquery-plugin, first of all, you must import jquery.

This is a demo about how to use it by cdn, and we use unpkg cdn in this case.

<!-- import style -->
<link rel="stylesheet" href="//unpkg.com/element-ui@1.0.0-rc.4/lib/theme-default/index.css">

<!-- body -->

<!--import script -->
<!-- you need import Vue.js before import element -->
<script src="//unpkg.com/vue@2.0.0-rc.6/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.0.0-rc.4/lib/index.js"></script>

1.8 KiB Raw Blame History