mirror of https://github.com/ElemeFE/element
* docs: update quickstart demo, close #9883 * docs: fix typopull/9783/merge
cinwell.li
杨奕
parent
6dd3d38393
commit
95d2eabd5e
|
|
@ -1,6 +1,7 @@
|
|||
## Installation
|
||||
|
||||
### npm
|
||||
|
||||
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
|
||||
|
||||
```shell
|
||||
|
|
@ -8,6 +9,7 @@ npm i element-ui -S
|
|||
```
|
||||
|
||||
### CDN
|
||||
|
||||
Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
|
||||
|
||||
```html
|
||||
|
|
@ -22,36 +24,9 @@ We recommend our users to lock Element's version when using CDN. Please refer to
|
|||
:::
|
||||
|
||||
### Hello world
|
||||
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click="visible = true">Button</el-button>
|
||||
<el-dialog :visible.sync="visible" title="Hello world">
|
||||
<p>Try Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</body>
|
||||
<!-- import Vue before Element -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function() {
|
||||
return { visible: false }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
|
||||
|
|
|
|||
|
|
@ -8,16 +8,13 @@ We provide a general [project template](https://github.com/ElementUI/element-sta
|
|||
|
||||
If you prefer not to use them, please read the following.
|
||||
|
||||
### Use vue-cli
|
||||
### Use Nuxt.js
|
||||
|
||||
We can also start a project using [vue-cli](https://github.com/vuejs/vue-cli):
|
||||
We can also start a project using [Nuxt.js](nuxtjs.org):
|
||||
|
||||
```shell
|
||||
> npm i -g vue-cli
|
||||
> mkdir my-project && cd my-project
|
||||
> vue init webpack
|
||||
> npm i && npm i element-ui
|
||||
```
|
||||
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
|
||||
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element-ui?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element-ui on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
|
||||
</div>
|
||||
|
||||
### Import Element
|
||||
|
||||
|
|
@ -26,19 +23,21 @@ You can import Element entirely, or just import what you need. Let's start with
|
|||
#### Fully import
|
||||
|
||||
In main.js:
|
||||
```javascript
|
||||
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)
|
||||
```javascript
|
||||
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)
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
The above imports Element entirely. Note that CSS file needs to be imported separately.
|
||||
|
||||
#### On demand
|
||||
|
|
@ -52,28 +51,31 @@ npm install babel-plugin-component -D
|
|||
```
|
||||
|
||||
Then edit .babelrc:
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": [
|
||||
["es2015", { "modules": false }]
|
||||
],
|
||||
"plugins": [["component", {
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]]
|
||||
"presets": [["es2015", { "modules": false }]],
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Next, if you need Button and Select, edit main.js:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import App from './App.vue'
|
||||
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)
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Select.name, Select);
|
||||
/* or
|
||||
* Vue.use(Button)
|
||||
* Vue.use(Select)
|
||||
|
|
@ -82,13 +84,13 @@ Vue.component(Select.name, Select)
|
|||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Vue from 'vue';
|
||||
import {
|
||||
Pagination,
|
||||
Dialog,
|
||||
|
|
@ -157,100 +159,104 @@ import {
|
|||
MessageBox,
|
||||
Message,
|
||||
Notification
|
||||
} from 'element-ui'
|
||||
} from 'element-ui';
|
||||
|
||||
Vue.use(Pagination)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(Autocomplete)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
Vue.use(Menu)
|
||||
Vue.use(Submenu)
|
||||
Vue.use(MenuItem)
|
||||
Vue.use(MenuItemGroup)
|
||||
Vue.use(Input)
|
||||
Vue.use(InputNumber)
|
||||
Vue.use(Radio)
|
||||
Vue.use(RadioGroup)
|
||||
Vue.use(RadioButton)
|
||||
Vue.use(Checkbox)
|
||||
Vue.use(CheckboxButton)
|
||||
Vue.use(CheckboxGroup)
|
||||
Vue.use(Switch)
|
||||
Vue.use(Select)
|
||||
Vue.use(Option)
|
||||
Vue.use(OptionGroup)
|
||||
Vue.use(Button)
|
||||
Vue.use(ButtonGroup)
|
||||
Vue.use(Table)
|
||||
Vue.use(TableColumn)
|
||||
Vue.use(DatePicker)
|
||||
Vue.use(TimeSelect)
|
||||
Vue.use(TimePicker)
|
||||
Vue.use(Popover)
|
||||
Vue.use(Tooltip)
|
||||
Vue.use(Breadcrumb)
|
||||
Vue.use(BreadcrumbItem)
|
||||
Vue.use(Form)
|
||||
Vue.use(FormItem)
|
||||
Vue.use(Tabs)
|
||||
Vue.use(TabPane)
|
||||
Vue.use(Tag)
|
||||
Vue.use(Tree)
|
||||
Vue.use(Alert)
|
||||
Vue.use(Slider)
|
||||
Vue.use(Icon)
|
||||
Vue.use(Row)
|
||||
Vue.use(Col)
|
||||
Vue.use(Upload)
|
||||
Vue.use(Progress)
|
||||
Vue.use(Badge)
|
||||
Vue.use(Card)
|
||||
Vue.use(Rate)
|
||||
Vue.use(Steps)
|
||||
Vue.use(Step)
|
||||
Vue.use(Carousel)
|
||||
Vue.use(CarouselItem)
|
||||
Vue.use(Collapse)
|
||||
Vue.use(CollapseItem)
|
||||
Vue.use(Cascader)
|
||||
Vue.use(ColorPicker)
|
||||
Vue.use(Container)
|
||||
Vue.use(Header)
|
||||
Vue.use(Aside)
|
||||
Vue.use(Main)
|
||||
Vue.use(Footer)
|
||||
Vue.use(Pagination);
|
||||
Vue.use(Dialog);
|
||||
Vue.use(Autocomplete);
|
||||
Vue.use(Dropdown);
|
||||
Vue.use(DropdownMenu);
|
||||
Vue.use(DropdownItem);
|
||||
Vue.use(Menu);
|
||||
Vue.use(Submenu);
|
||||
Vue.use(MenuItem);
|
||||
Vue.use(MenuItemGroup);
|
||||
Vue.use(Input);
|
||||
Vue.use(InputNumber);
|
||||
Vue.use(Radio);
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(RadioButton);
|
||||
Vue.use(Checkbox);
|
||||
Vue.use(CheckboxButton);
|
||||
Vue.use(CheckboxGroup);
|
||||
Vue.use(Switch);
|
||||
Vue.use(Select);
|
||||
Vue.use(Option);
|
||||
Vue.use(OptionGroup);
|
||||
Vue.use(Button);
|
||||
Vue.use(ButtonGroup);
|
||||
Vue.use(Table);
|
||||
Vue.use(TableColumn);
|
||||
Vue.use(DatePicker);
|
||||
Vue.use(TimeSelect);
|
||||
Vue.use(TimePicker);
|
||||
Vue.use(Popover);
|
||||
Vue.use(Tooltip);
|
||||
Vue.use(Breadcrumb);
|
||||
Vue.use(BreadcrumbItem);
|
||||
Vue.use(Form);
|
||||
Vue.use(FormItem);
|
||||
Vue.use(Tabs);
|
||||
Vue.use(TabPane);
|
||||
Vue.use(Tag);
|
||||
Vue.use(Tree);
|
||||
Vue.use(Alert);
|
||||
Vue.use(Slider);
|
||||
Vue.use(Icon);
|
||||
Vue.use(Row);
|
||||
Vue.use(Col);
|
||||
Vue.use(Upload);
|
||||
Vue.use(Progress);
|
||||
Vue.use(Badge);
|
||||
Vue.use(Card);
|
||||
Vue.use(Rate);
|
||||
Vue.use(Steps);
|
||||
Vue.use(Step);
|
||||
Vue.use(Carousel);
|
||||
Vue.use(CarouselItem);
|
||||
Vue.use(Collapse);
|
||||
Vue.use(CollapseItem);
|
||||
Vue.use(Cascader);
|
||||
Vue.use(ColorPicker);
|
||||
Vue.use(Container);
|
||||
Vue.use(Header);
|
||||
Vue.use(Aside);
|
||||
Vue.use(Main);
|
||||
Vue.use(Footer);
|
||||
|
||||
Vue.use(Loading.directive)
|
||||
Vue.use(Loading.directive);
|
||||
|
||||
Vue.prototype.$loading = Loading.service
|
||||
Vue.prototype.$msgbox = MessageBox
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$prompt = MessageBox.prompt
|
||||
Vue.prototype.$notify = Notification
|
||||
Vue.prototype.$message = Message
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
Vue.prototype.$confirm = MessageBox.confirm;
|
||||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
```
|
||||
|
||||
### Global config
|
||||
|
||||
When importing Element, you can define a global config object. For now this object has only one property: `size`, which sets the default size for all components:
|
||||
|
||||
Fully import Element：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
Vue.use(Element, { size: 'small' })
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import Element from 'element-ui';
|
||||
Vue.use(Element, { size: 'small' });
|
||||
```
|
||||
|
||||
Partial import Element：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import { Button } from 'element-ui'
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small' }
|
||||
Vue.use(Button)
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button } from 'element-ui';
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small' };
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
With the above config, the default size of all components that have size attribute will be 'small'.
|
||||
|
||||
### Start coding
|
||||
|
|
@ -266,4 +272,5 @@ Build:
|
|||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Please refer to each component's documentation to learn how to use them.
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
## Instalación
|
||||
|
||||
### npm
|
||||
|
||||
Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
|
||||
|
||||
```shell
|
||||
npm i element-ui -S
|
||||
```
|
||||
|
||||
### CDN
|
||||
### CDN
|
||||
|
||||
Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/element-ui/) , e importe el JavaScript y los archivos CSS en su página.
|
||||
|
||||
```html
|
||||
|
|
@ -20,39 +22,10 @@ Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/eleme
|
|||
##Tip
|
||||
Recomendamos a nuestros usuarios congelar la versión de Elemet cuando usas un CDN. Por favor, refiérase a [unpkg.com](https://unpkg.com) para más información.
|
||||
|
||||
|
||||
### Hello world
|
||||
|
||||
Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- import CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click="visible = true">Button</el-button>
|
||||
<el-dialog :visible.sync="visible" title="Hello world">
|
||||
<p>Try Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</body>
|
||||
<!-- import Vue before Element -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function() {
|
||||
return { visible: false }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: Quick Start
|
||||
<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: Quick Start
|
||||
|
|
|
|||
|
|
@ -8,16 +8,13 @@ Proveemos una plantilla general [project template](https://github.com/ElementUI/
|
|||
|
||||
Si prefiere no utilizarlas, lee las siguientes secciones de este documento.
|
||||
|
||||
### Usando vue-cli
|
||||
### Use Nuxt.js
|
||||
|
||||
Podemos empezar un proyecto utilizando [vue-cli](https://github.com/vuejs/vue-cli):
|
||||
We can also start a project using [Nuxt.js](nuxtjs.org):
|
||||
|
||||
```shell
|
||||
> npm i -g vue-cli
|
||||
> mkdir my-project && cd my-project
|
||||
> vue init webpack
|
||||
> npm i && npm i element-ui
|
||||
```
|
||||
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
|
||||
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element-ui?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element-ui on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
|
||||
</div>
|
||||
|
||||
### Importando Element
|
||||
|
||||
|
|
@ -26,19 +23,21 @@ Puede importar Element completamente o solamente importar lo que necesite. Comen
|
|||
#### Importando todo
|
||||
|
||||
In main.js:
|
||||
```javascript
|
||||
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)
|
||||
```javascript
|
||||
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)
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.
|
||||
|
||||
#### En demanda
|
||||
|
|
@ -52,28 +51,31 @@ npm install babel-plugin-component -D
|
|||
```
|
||||
|
||||
Luego edite .babelrc:
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": [
|
||||
["es2015", { "modules": false }]
|
||||
],
|
||||
"plugins": [["component", {
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]]
|
||||
"presets": [["es2015", { "modules": false }]],
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Luego, si necesita Button y Select, edite main.js:
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import App from './App.vue'
|
||||
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)
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Select.name, Select);
|
||||
/* or
|
||||
* Vue.use(Button)
|
||||
* Vue.use(Select)
|
||||
|
|
@ -82,13 +84,13 @@ Vue.component(Select.name, Select)
|
|||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Vue from 'vue';
|
||||
import {
|
||||
Pagination,
|
||||
Dialog,
|
||||
|
|
@ -157,102 +159,107 @@ import {
|
|||
MessageBox,
|
||||
Message,
|
||||
Notification
|
||||
} from 'element-ui'
|
||||
} from 'element-ui';
|
||||
|
||||
Vue.use(Pagination)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(Autocomplete)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
Vue.use(Menu)
|
||||
Vue.use(Submenu)
|
||||
Vue.use(MenuItem)
|
||||
Vue.use(MenuItemGroup)
|
||||
Vue.use(Input)
|
||||
Vue.use(InputNumber)
|
||||
Vue.use(Radio)
|
||||
Vue.use(RadioGroup)
|
||||
Vue.use(RadioButton)
|
||||
Vue.use(Checkbox)
|
||||
Vue.use(CheckboxGroup)
|
||||
Vue.use(Switch)
|
||||
Vue.use(Select)
|
||||
Vue.use(Option)
|
||||
Vue.use(OptionGroup)
|
||||
Vue.use(Button)
|
||||
Vue.use(ButtonGroup)
|
||||
Vue.use(Table)
|
||||
Vue.use(TableColumn)
|
||||
Vue.use(DatePicker)
|
||||
Vue.use(TimeSelect)
|
||||
Vue.use(TimePicker)
|
||||
Vue.use(Popover)
|
||||
Vue.use(Tooltip)
|
||||
Vue.use(Breadcrumb)
|
||||
Vue.use(BreadcrumbItem)
|
||||
Vue.use(Form)
|
||||
Vue.use(FormItem)
|
||||
Vue.use(Tabs)
|
||||
Vue.use(TabPane)
|
||||
Vue.use(Tag)
|
||||
Vue.use(Tree)
|
||||
Vue.use(Alert)
|
||||
Vue.use(Slider)
|
||||
Vue.use(Icon)
|
||||
Vue.use(Row)
|
||||
Vue.use(Col)
|
||||
Vue.use(Upload)
|
||||
Vue.use(Progress)
|
||||
Vue.use(Badge)
|
||||
Vue.use(Card)
|
||||
Vue.use(Rate)
|
||||
Vue.use(Steps)
|
||||
Vue.use(Step)
|
||||
Vue.use(Carousel)
|
||||
Vue.use(CarouselItem)
|
||||
Vue.use(Collapse)
|
||||
Vue.use(CollapseItem)
|
||||
Vue.use(Cascader)
|
||||
Vue.use(ColorPicker)
|
||||
Vue.use(Container)
|
||||
Vue.use(Header)
|
||||
Vue.use(Aside)
|
||||
Vue.use(Main)
|
||||
Vue.use(Footer)
|
||||
Vue.use(Pagination);
|
||||
Vue.use(Dialog);
|
||||
Vue.use(Autocomplete);
|
||||
Vue.use(Dropdown);
|
||||
Vue.use(DropdownMenu);
|
||||
Vue.use(DropdownItem);
|
||||
Vue.use(Menu);
|
||||
Vue.use(Submenu);
|
||||
Vue.use(MenuItem);
|
||||
Vue.use(MenuItemGroup);
|
||||
Vue.use(Input);
|
||||
Vue.use(InputNumber);
|
||||
Vue.use(Radio);
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(RadioButton);
|
||||
Vue.use(Checkbox);
|
||||
Vue.use(CheckboxGroup);
|
||||
Vue.use(Switch);
|
||||
Vue.use(Select);
|
||||
Vue.use(Option);
|
||||
Vue.use(OptionGroup);
|
||||
Vue.use(Button);
|
||||
Vue.use(ButtonGroup);
|
||||
Vue.use(Table);
|
||||
Vue.use(TableColumn);
|
||||
Vue.use(DatePicker);
|
||||
Vue.use(TimeSelect);
|
||||
Vue.use(TimePicker);
|
||||
Vue.use(Popover);
|
||||
Vue.use(Tooltip);
|
||||
Vue.use(Breadcrumb);
|
||||
Vue.use(BreadcrumbItem);
|
||||
Vue.use(Form);
|
||||
Vue.use(FormItem);
|
||||
Vue.use(Tabs);
|
||||
Vue.use(TabPane);
|
||||
Vue.use(Tag);
|
||||
Vue.use(Tree);
|
||||
Vue.use(Alert);
|
||||
Vue.use(Slider);
|
||||
Vue.use(Icon);
|
||||
Vue.use(Row);
|
||||
Vue.use(Col);
|
||||
Vue.use(Upload);
|
||||
Vue.use(Progress);
|
||||
Vue.use(Badge);
|
||||
Vue.use(Card);
|
||||
Vue.use(Rate);
|
||||
Vue.use(Steps);
|
||||
Vue.use(Step);
|
||||
Vue.use(Carousel);
|
||||
Vue.use(CarouselItem);
|
||||
Vue.use(Collapse);
|
||||
Vue.use(CollapseItem);
|
||||
Vue.use(Cascader);
|
||||
Vue.use(ColorPicker);
|
||||
Vue.use(Container);
|
||||
Vue.use(Header);
|
||||
Vue.use(Aside);
|
||||
Vue.use(Main);
|
||||
Vue.use(Footer);
|
||||
|
||||
Vue.use(Loading.directive)
|
||||
Vue.use(Loading.directive);
|
||||
|
||||
Vue.prototype.$loading = Loading.service
|
||||
Vue.prototype.$msgbox = MessageBox
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$prompt = MessageBox.prompt
|
||||
Vue.prototype.$notify = Notification
|
||||
Vue.prototype.$message = Message
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
Vue.prototype.$confirm = MessageBox.confirm;
|
||||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
```
|
||||
|
||||
### Configuración global
|
||||
|
||||
Cuando importa Element, puede definir un objeto global de configuración. Por ahora este elemento solo contiene una propiedad: `size`, que define el tamaño por defecto de todos los componentes:
|
||||
|
||||
Importando Element completamente：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
Vue.use(Element, { size: 'small' })
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import Element from 'element-ui';
|
||||
Vue.use(Element, { size: 'small' });
|
||||
```
|
||||
|
||||
Importando Element parcialmente：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import { Button } from 'element-ui'
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small' }
|
||||
Vue.use(Button)
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button } from 'element-ui';
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small' };
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`.
|
||||
|
||||
### Empiece ya!
|
||||
|
||||
Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Inicie el modo de desarrollo:
|
||||
|
||||
```bash
|
||||
|
|
@ -264,4 +271,5 @@ Build:
|
|||
```bash
|
||||
npm run build
|
||||
```
|
||||
Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.
|
||||
|
||||
Por favor, refiérase a la documentación de cada componente para aprender cómo usarlos.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
## 安装
|
||||
|
||||
### npm 安装
|
||||
|
||||
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
|
||||
|
||||
```shell
|
||||
|
|
@ -8,6 +9,7 @@ npm i element-ui -S
|
|||
```
|
||||
|
||||
### CDN
|
||||
|
||||
目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
|
||||
|
||||
```html
|
||||
|
|
@ -22,36 +24,9 @@ npm i element-ui -S
|
|||
:::
|
||||
|
||||
### Hello world
|
||||
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- 引入样式 -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<el-button @click="visible = true">按钮</el-button>
|
||||
<el-dialog :visible.sync="visible" title="Hello world">
|
||||
<p>欢迎使用 Element</p>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||||
<script>
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: function() {
|
||||
return { visible: false }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</html>
|
||||
```
|
||||
<iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
|
||||
|
||||
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。
|
||||
|
|
|
|||
|
|
@ -8,16 +8,14 @@
|
|||
|
||||
如果不希望使用我们提供的模板，请继续阅读。
|
||||
|
||||
### 使用 vue-cli
|
||||
### 使用 Nuxt.js
|
||||
|
||||
我们还可以使用 [vue-cli](https://github.com/vuejs/vue-cli) 初始化项目，命令如下：
|
||||
|
||||
```shell
|
||||
> npm i -g vue-cli
|
||||
> mkdir my-project && cd my-project
|
||||
> vue init webpack
|
||||
> npm i && npm i element-ui
|
||||
```
|
||||
我们还可以使用 [Nuxt.js](https://nuxtjs.org)：
|
||||
|
||||
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
|
||||
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element-ui?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element-ui on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
|
||||
</div>
|
||||
|
||||
### 引入 Element
|
||||
|
||||
|
|
@ -26,19 +24,21 @@
|
|||
#### 完整引入
|
||||
|
||||
在 main.js 中写入以下内容：
|
||||
```javascript
|
||||
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)
|
||||
```javascript
|
||||
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)
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
|
||||
|
||||
#### 按需引入
|
||||
|
|
@ -52,28 +52,31 @@ npm install babel-plugin-component -D
|
|||
```
|
||||
|
||||
然后，将 .babelrc 修改为：
|
||||
|
||||
```json
|
||||
{
|
||||
"presets": [
|
||||
["es2015", { "modules": false }]
|
||||
],
|
||||
"plugins": [["component", {
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]]
|
||||
"presets": [["es2015", { "modules": false }]],
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import { Button, Select } from 'element-ui'
|
||||
import App from './App.vue'
|
||||
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)
|
||||
Vue.component(Button.name, Button);
|
||||
Vue.component(Select.name, Select);
|
||||
/* 或写为
|
||||
* Vue.use(Button)
|
||||
* Vue.use(Select)
|
||||
|
|
@ -82,13 +85,13 @@ Vue.component(Select.name, Select)
|
|||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准）
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import Vue from 'vue';
|
||||
import {
|
||||
Pagination,
|
||||
Dialog,
|
||||
|
|
@ -157,100 +160,104 @@ import {
|
|||
MessageBox,
|
||||
Message,
|
||||
Notification
|
||||
} from 'element-ui'
|
||||
} from 'element-ui';
|
||||
|
||||
Vue.use(Pagination)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(Autocomplete)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
Vue.use(Menu)
|
||||
Vue.use(Submenu)
|
||||
Vue.use(MenuItem)
|
||||
Vue.use(MenuItemGroup)
|
||||
Vue.use(Input)
|
||||
Vue.use(InputNumber)
|
||||
Vue.use(Radio)
|
||||
Vue.use(RadioGroup)
|
||||
Vue.use(RadioButton)
|
||||
Vue.use(Checkbox)
|
||||
Vue.use(CheckboxButton)
|
||||
Vue.use(CheckboxGroup)
|
||||
Vue.use(Switch)
|
||||
Vue.use(Select)
|
||||
Vue.use(Option)
|
||||
Vue.use(OptionGroup)
|
||||
Vue.use(Button)
|
||||
Vue.use(ButtonGroup)
|
||||
Vue.use(Table)
|
||||
Vue.use(TableColumn)
|
||||
Vue.use(DatePicker)
|
||||
Vue.use(TimeSelect)
|
||||
Vue.use(TimePicker)
|
||||
Vue.use(Popover)
|
||||
Vue.use(Tooltip)
|
||||
Vue.use(Breadcrumb)
|
||||
Vue.use(BreadcrumbItem)
|
||||
Vue.use(Form)
|
||||
Vue.use(FormItem)
|
||||
Vue.use(Tabs)
|
||||
Vue.use(TabPane)
|
||||
Vue.use(Tag)
|
||||
Vue.use(Tree)
|
||||
Vue.use(Alert)
|
||||
Vue.use(Slider)
|
||||
Vue.use(Icon)
|
||||
Vue.use(Row)
|
||||
Vue.use(Col)
|
||||
Vue.use(Upload)
|
||||
Vue.use(Progress)
|
||||
Vue.use(Badge)
|
||||
Vue.use(Card)
|
||||
Vue.use(Rate)
|
||||
Vue.use(Steps)
|
||||
Vue.use(Step)
|
||||
Vue.use(Carousel)
|
||||
Vue.use(CarouselItem)
|
||||
Vue.use(Collapse)
|
||||
Vue.use(CollapseItem)
|
||||
Vue.use(Cascader)
|
||||
Vue.use(ColorPicker)
|
||||
Vue.use(Container)
|
||||
Vue.use(Header)
|
||||
Vue.use(Aside)
|
||||
Vue.use(Main)
|
||||
Vue.use(Footer)
|
||||
Vue.use(Pagination);
|
||||
Vue.use(Dialog);
|
||||
Vue.use(Autocomplete);
|
||||
Vue.use(Dropdown);
|
||||
Vue.use(DropdownMenu);
|
||||
Vue.use(DropdownItem);
|
||||
Vue.use(Menu);
|
||||
Vue.use(Submenu);
|
||||
Vue.use(MenuItem);
|
||||
Vue.use(MenuItemGroup);
|
||||
Vue.use(Input);
|
||||
Vue.use(InputNumber);
|
||||
Vue.use(Radio);
|
||||
Vue.use(RadioGroup);
|
||||
Vue.use(RadioButton);
|
||||
Vue.use(Checkbox);
|
||||
Vue.use(CheckboxButton);
|
||||
Vue.use(CheckboxGroup);
|
||||
Vue.use(Switch);
|
||||
Vue.use(Select);
|
||||
Vue.use(Option);
|
||||
Vue.use(OptionGroup);
|
||||
Vue.use(Button);
|
||||
Vue.use(ButtonGroup);
|
||||
Vue.use(Table);
|
||||
Vue.use(TableColumn);
|
||||
Vue.use(DatePicker);
|
||||
Vue.use(TimeSelect);
|
||||
Vue.use(TimePicker);
|
||||
Vue.use(Popover);
|
||||
Vue.use(Tooltip);
|
||||
Vue.use(Breadcrumb);
|
||||
Vue.use(BreadcrumbItem);
|
||||
Vue.use(Form);
|
||||
Vue.use(FormItem);
|
||||
Vue.use(Tabs);
|
||||
Vue.use(TabPane);
|
||||
Vue.use(Tag);
|
||||
Vue.use(Tree);
|
||||
Vue.use(Alert);
|
||||
Vue.use(Slider);
|
||||
Vue.use(Icon);
|
||||
Vue.use(Row);
|
||||
Vue.use(Col);
|
||||
Vue.use(Upload);
|
||||
Vue.use(Progress);
|
||||
Vue.use(Badge);
|
||||
Vue.use(Card);
|
||||
Vue.use(Rate);
|
||||
Vue.use(Steps);
|
||||
Vue.use(Step);
|
||||
Vue.use(Carousel);
|
||||
Vue.use(CarouselItem);
|
||||
Vue.use(Collapse);
|
||||
Vue.use(CollapseItem);
|
||||
Vue.use(Cascader);
|
||||
Vue.use(ColorPicker);
|
||||
Vue.use(Container);
|
||||
Vue.use(Header);
|
||||
Vue.use(Aside);
|
||||
Vue.use(Main);
|
||||
Vue.use(Footer);
|
||||
|
||||
Vue.use(Loading.directive)
|
||||
Vue.use(Loading.directive);
|
||||
|
||||
Vue.prototype.$loading = Loading.service
|
||||
Vue.prototype.$msgbox = MessageBox
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$prompt = MessageBox.prompt
|
||||
Vue.prototype.$notify = Notification
|
||||
Vue.prototype.$message = Message
|
||||
Vue.prototype.$loading = Loading.service;
|
||||
Vue.prototype.$msgbox = MessageBox;
|
||||
Vue.prototype.$alert = MessageBox.alert;
|
||||
Vue.prototype.$confirm = MessageBox.confirm;
|
||||
Vue.prototype.$prompt = MessageBox.prompt;
|
||||
Vue.prototype.$notify = Notification;
|
||||
Vue.prototype.$message = Message;
|
||||
```
|
||||
|
||||
### 全局配置
|
||||
|
||||
在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 `size` 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下：
|
||||
|
||||
完整引入 Element：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import Element from 'element-ui'
|
||||
Vue.use(Element, { size: 'small' })
|
||||
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import Element from 'element-ui';
|
||||
Vue.use(Element, { size: 'small' });
|
||||
```
|
||||
|
||||
按需引入 Element：
|
||||
```JS
|
||||
import Vue from 'vue'
|
||||
import { Button } from 'element-ui'
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small' }
|
||||
Vue.use(Button)
|
||||
```js
|
||||
import Vue from 'vue';
|
||||
import { Button } from 'element-ui';
|
||||
|
||||
Vue.prototype.$ELEMENT = { size: 'small' };
|
||||
Vue.use(Button);
|
||||
```
|
||||
|
||||
按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'。
|
||||
|
||||
### 开始使用
|
||||
|
|
@ -266,4 +273,5 @@ npm run dev
|
|||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
各个组件的使用方法请参阅它们各自的文档。
|
||||
|
|
|
|||
Loading…
Reference in New Issue