2016-08-30 11:30:58 +00:00
|
|
|
## 快速上手
|
|
|
|
|
2016-09-12 05:53:45 +00:00
|
|
|
element 是一套 Vue.js 后台组件库,它能够帮助你更轻松更快速地开发后台项目。
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-08-30 11:30:58 +00:00
|
|
|
### 安装
|
|
|
|
|
|
|
|
```bash
|
2016-09-21 02:19:50 +00:00
|
|
|
$ npm install element-ui@next -S
|
2016-08-30 11:30:58 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
### 注册组件
|
|
|
|
|
|
|
|
引入整个 element
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
import Vue from 'vue'
|
|
|
|
import Element from 'element-ui'
|
2016-09-21 04:03:02 +00:00
|
|
|
import 'element-ui/lib/theme-default/index.css'
|
2016-08-30 11:30:58 +00:00
|
|
|
|
|
|
|
Vue.use(Element)
|
|
|
|
```
|
|
|
|
|
|
|
|
或者只引入你需要的组件
|
|
|
|
|
2016-09-12 05:53:45 +00:00
|
|
|
**使用 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
|
2016-08-30 11:30:58 +00:00
|
|
|
|
|
|
|
```javascript
|
|
|
|
import {
|
|
|
|
Select,
|
|
|
|
Button
|
|
|
|
// ...
|
|
|
|
} from 'element-ui'
|
|
|
|
|
2016-09-12 05:53:45 +00:00
|
|
|
Vue.component(Select.name, Select)
|
2016-08-30 11:30:58 +00:00
|
|
|
Vue.component(Button.name, Button)
|
|
|
|
```
|
|
|
|
|
2016-09-12 05:53:45 +00:00
|
|
|
将会被翻译成
|
2016-08-30 11:30:58 +00:00
|
|
|
|
|
|
|
```javascript
|
|
|
|
import Select from 'element-ui/lib/select';
|
2016-09-12 05:53:45 +00:00
|
|
|
import 'element-ui/lib/theme-default/select.css';
|
2016-08-30 11:30:58 +00:00
|
|
|
import Button from 'element-ui/lib/button';
|
2016-09-12 05:53:45 +00:00
|
|
|
import 'element-ui/lib/theme-default/button.css';
|
2016-08-30 11:30:58 +00:00
|
|
|
|
2016-09-21 04:03:02 +00:00
|
|
|
Vue.component(Select.name, Select);
|
|
|
|
Vue.component(Button.name, Button);
|
2016-08-30 11:30:58 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
### babel-plugin-component
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-09-12 05:53:45 +00:00
|
|
|
配置 .babelrc
|
2016-07-27 06:15:02 +00:00
|
|
|
|
2016-08-30 11:30:58 +00:00
|
|
|
```json
|
|
|
|
{
|
|
|
|
"plugins": ["xxx", ["component", [
|
|
|
|
{
|
|
|
|
"libraryName": "element-ui",
|
|
|
|
"styleLibraryName": "theme-default"
|
|
|
|
}
|
|
|
|
]]]
|
|
|
|
}
|
|
|
|
```
|