mirror of https://github.com/ElemeFE/element
97 lines
2.2 KiB
Markdown
97 lines
2.2 KiB
Markdown
# Element
|
|
> Desktop UI elements for Vue.js 2.0.
|
|
|
|
## Docs
|
|
|
|
Coming soon
|
|
|
|
## Demo
|
|
Demo will come with the documentation. Here is a preview of what a page based on Element looks like:
|
|
|
|
<img src="./examples/assets/images/element-demo.jpeg" width = "100%" />
|
|
|
|
## Usages
|
|
```shell
|
|
npm install element-ui@next
|
|
```
|
|
|
|
## Quick Start
|
|
use [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)
|
|
|
|
``` javascript
|
|
import Vue from 'vue'
|
|
import Element from 'element-ui'
|
|
|
|
Vue.use(Element)
|
|
|
|
// or
|
|
import {
|
|
Select,
|
|
Button
|
|
// ...
|
|
} from 'element-ui'
|
|
|
|
Vue.component(Select.name, ElSelect)
|
|
Vue.component(Button.name, ElButton)
|
|
```
|
|
|
|
(roughly) to
|
|
|
|
``` javascript
|
|
import Vue from 'vue'
|
|
import Element from 'element-ui'
|
|
import 'element-ui/lib/theme-default/index.css';
|
|
|
|
Vue.use(Element)
|
|
|
|
// or
|
|
import Select from 'element-ui/lib/select';
|
|
import Select from 'element-ui/lib/theme-default/select.css';
|
|
import Button from 'element-ui/lib/button';
|
|
import Button from 'element-ui/lib/theme-default/button.css';
|
|
|
|
Vue.component(Select.name, ElSelect)
|
|
Vue.component(Button.name, ElButton)
|
|
```
|
|
|
|
## babel-plugin-component
|
|
.babelrc
|
|
```json
|
|
{
|
|
"plugins": ["xxx", ["component", [
|
|
{
|
|
"libraryName": "element-ui",
|
|
"styleLibraryName": "theme-default"
|
|
}
|
|
]]]
|
|
}
|
|
```
|
|
|
|
## development
|
|
|
|
### Building Tool Installation
|
|
|
|
Element UI is built with [cooking](http://cookingjs.github.io/). So before running it you'll need to install [cooking](http://cookingjs.github.io/) globally.
|
|
|
|
```bash
|
|
$ npm install cooking -g
|
|
```
|
|
|
|
### Commands
|
|
|
|
```bash
|
|
$ make install --- install dependencies
|
|
$ make dev --- develop mode
|
|
$ make dist --- compile the project
|
|
$ make dist-all --- compile each component individually
|
|
```
|
|
|
|
## Changelog
|
|
Details changes for each release are documented in the [release notes](https://github.com/ElemeFE/element/releases).
|
|
|
|
## LICENSE
|
|
MIT
|
|
|
|
<!-- [](https://travis-ci.org/ElemeFE/element-ui) [](https://www.npmjs.org/package/element-ui) [](https://npmjs.org/package/element-ui) -->
|
|
|