element/examples/docs/zh-cn/quickstart.md

80 lines
1.6 KiB
Markdown
Raw Normal View History

2016-08-30 19:30:58 +08:00
## 快速上手
2016-09-24 20:26:03 +08:00
Element UI 是一套 Vue.js 后台组件库,它能够帮助你更轻松更快速地开发后台项目。
2016-07-27 14:15:02 +08:00
2016-08-30 19:30:58 +08:00
### 安装
```bash
$ npm install element-ui@next -S
2016-08-30 19:30:58 +08:00
```
### 注册组件
2016-09-24 20:26:03 +08:00
引入整个 Element UI
2016-08-30 19:30:58 +08:00
```javascript
import Vue from 'vue'
import Element from 'element-ui'
2016-09-21 12:03:02 +08:00
import 'element-ui/lib/theme-default/index.css'
2016-08-30 19:30:58 +08:00
Vue.use(Element)
```
或者只引入你需要的组件
2016-09-12 13:53:45 +08:00
**使用 [babel-plugin-component](https://github.com/QingWei-Li/babel-plugin-component)**
2016-08-30 19:30:58 +08:00
```javascript
import {
Select,
Button
// ...
} from 'element-ui'
2016-09-12 13:53:45 +08:00
Vue.component(Select.name, Select)
2016-08-30 19:30:58 +08:00
Vue.component(Button.name, Button)
```
2016-09-12 13:53:45 +08:00
将会被翻译成
2016-08-30 19:30:58 +08:00
```javascript
import Select from 'element-ui/lib/select';
2016-09-12 13:53:45 +08:00
import 'element-ui/lib/theme-default/select.css';
2016-08-30 19:30:58 +08:00
import Button from 'element-ui/lib/button';
2016-09-12 13:53:45 +08:00
import 'element-ui/lib/theme-default/button.css';
2016-08-30 19:30:58 +08:00
2016-09-21 12:03:02 +08:00
Vue.component(Select.name, Select);
Vue.component(Button.name, Button);
2016-08-30 19:30:58 +08:00
```
### babel-plugin-component
2016-07-27 14:15:02 +08:00
2016-09-12 13:53:45 +08:00
配置 .babelrc
2016-07-27 14:15:02 +08:00
2016-08-30 19:30:58 +08:00
```json
{
"plugins": ["xxx", ["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]]]
}
```
2016-09-23 08:27:29 +08:00
### 通过标签全局引入
这里用 unpkg cdn 做示范。请先引入 Vue 再引入组件,加载完成后会自动注册,参考 [示例](https://codepen.io/anon/pen/ozYpNA)。
```html
<!-- 引入样式 -->
<link rel="stylesheet" href="//unpkg.com/element-ui@1.0.0-rc.4/lib/theme-default/index.css">
<!-- body -->
<!-- 引入组件库 -->
<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>
```