github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Docs: update quickstart demo, close #9883 (#9928) 

* docs: update quickstart demo, close #9883

* docs: fix typo
pull/9783/merge
cinwell.li 2018-03-01 12:05:49 +08:00 committed by 杨奕
parent 6dd3d38393
commit 95d2eabd5e
6 changed files with 369 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
examples/docs/en-US/installation.md
View File

@ -1,6 +1,7 @@
## Installation ## Installation
### npm ### npm
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/). Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
```shell ```shell
@ -8,6 +9,7 @@ npm i element-ui -S
``` ```
### CDN ### CDN
Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page. Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui/) , and import JavaScript and CSS file in your page.
```html ```html
@ -22,36 +24,9 @@ We recommend our users to lock Element's version when using CDN. Please refer to
::: :::
### Hello world ### Hello world
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/) If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
```html <iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<!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>
```
If you are using npm and wish to apply webpack, please continue to the next page: Quick Start. If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.

221
examples/docs/en-US/quickstart.md
View File

@ -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. 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 <div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
> npm i -g vue-cli <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>
> mkdir my-project && cd my-project </div>
> vue init webpack
> npm i && npm i element-ui
```
### Import Element ### Import Element
@ -26,19 +23,21 @@ You can import Element entirely, or just import what you need. Let's start with
#### Fully import #### Fully import
In main.js: 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({ new Vue({
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}) });
``` ```
The above imports Element entirely. Note that CSS file needs to be imported separately. The above imports Element entirely. Note that CSS file needs to be imported separately.
#### On demand #### On demand
@ -52,28 +51,31 @@ npm install babel-plugin-component -D
``` ```
Then edit .babelrc: Then edit .babelrc:
```json ```json
{ {
"presets": [ "presets": [["es2015", { "modules": false }]],
["es2015", { "modules": false }] "plugins": [
], [
"plugins": [["component", { "component",
{
"libraryName": "element-ui", "libraryName": "element-ui",
"styleLibraryName": "theme-chalk" "styleLibraryName": "theme-chalk"
} }
]] ]
]
} }
``` ```
Next, if you need Button and Select, edit main.js: Next, if you need Button and Select, edit main.js:
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue';
import { Button, Select } from 'element-ui' import { Button, Select } from 'element-ui';
import App from './App.vue' import App from './App.vue';
Vue.component(Button.name, Button) Vue.component(Button.name, Button);
Vue.component(Select.name, Select) Vue.component(Select.name, Select);
/* or /* or
* Vue.use(Button) * Vue.use(Button)
* Vue.use(Select) * Vue.use(Select)
@ -82,13 +84,13 @@ Vue.component(Select.name, Select)
new Vue({ new Vue({
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}) });
``` ```
Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json)) Full example (Component list reference [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue';
import { import {
Pagination, Pagination,
Dialog, Dialog,
@ -157,100 +159,104 @@ import {
MessageBox, MessageBox,
Message, Message,
Notification Notification
} from 'element-ui' } from 'element-ui';
Vue.use(Pagination) Vue.use(Pagination);
Vue.use(Dialog) Vue.use(Dialog);
Vue.use(Autocomplete) Vue.use(Autocomplete);
Vue.use(Dropdown) Vue.use(Dropdown);
Vue.use(DropdownMenu) Vue.use(DropdownMenu);
Vue.use(DropdownItem) Vue.use(DropdownItem);
Vue.use(Menu) Vue.use(Menu);
Vue.use(Submenu) Vue.use(Submenu);
Vue.use(MenuItem) Vue.use(MenuItem);
Vue.use(MenuItemGroup) Vue.use(MenuItemGroup);
Vue.use(Input) Vue.use(Input);
Vue.use(InputNumber) Vue.use(InputNumber);
Vue.use(Radio) Vue.use(Radio);
Vue.use(RadioGroup) Vue.use(RadioGroup);
Vue.use(RadioButton) Vue.use(RadioButton);
Vue.use(Checkbox) Vue.use(Checkbox);
Vue.use(CheckboxButton) Vue.use(CheckboxButton);
Vue.use(CheckboxGroup) Vue.use(CheckboxGroup);
Vue.use(Switch) Vue.use(Switch);
Vue.use(Select) Vue.use(Select);
Vue.use(Option) Vue.use(Option);
Vue.use(OptionGroup) Vue.use(OptionGroup);
Vue.use(Button) Vue.use(Button);
Vue.use(ButtonGroup) Vue.use(ButtonGroup);
Vue.use(Table) Vue.use(Table);
Vue.use(TableColumn) Vue.use(TableColumn);
Vue.use(DatePicker) Vue.use(DatePicker);
Vue.use(TimeSelect) Vue.use(TimeSelect);
Vue.use(TimePicker) Vue.use(TimePicker);
Vue.use(Popover) Vue.use(Popover);
Vue.use(Tooltip) Vue.use(Tooltip);
Vue.use(Breadcrumb) Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem) Vue.use(BreadcrumbItem);
Vue.use(Form) Vue.use(Form);
Vue.use(FormItem) Vue.use(FormItem);
Vue.use(Tabs) Vue.use(Tabs);
Vue.use(TabPane) Vue.use(TabPane);
Vue.use(Tag) Vue.use(Tag);
Vue.use(Tree) Vue.use(Tree);
Vue.use(Alert) Vue.use(Alert);
Vue.use(Slider) Vue.use(Slider);
Vue.use(Icon) Vue.use(Icon);
Vue.use(Row) Vue.use(Row);
Vue.use(Col) Vue.use(Col);
Vue.use(Upload) Vue.use(Upload);
Vue.use(Progress) Vue.use(Progress);
Vue.use(Badge) Vue.use(Badge);
Vue.use(Card) Vue.use(Card);
Vue.use(Rate) Vue.use(Rate);
Vue.use(Steps) Vue.use(Steps);
Vue.use(Step) Vue.use(Step);
Vue.use(Carousel) Vue.use(Carousel);
Vue.use(CarouselItem) Vue.use(CarouselItem);
Vue.use(Collapse) Vue.use(Collapse);
Vue.use(CollapseItem) Vue.use(CollapseItem);
Vue.use(Cascader) Vue.use(Cascader);
Vue.use(ColorPicker) Vue.use(ColorPicker);
Vue.use(Container) Vue.use(Container);
Vue.use(Header) Vue.use(Header);
Vue.use(Aside) Vue.use(Aside);
Vue.use(Main) Vue.use(Main);
Vue.use(Footer) Vue.use(Footer);
Vue.use(Loading.directive) Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message Vue.prototype.$message = Message;
``` ```
### Global config ### 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: 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： Fully import Element：
```JS
import Vue from 'vue' ```js
import Element from 'element-ui' import Vue from 'vue';
Vue.use(Element, { size: 'small' }) import Element from 'element-ui';
Vue.use(Element, { size: 'small' });
``` ```
Partial import Element： Partial import Element：
```JS
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' } ```js
Vue.use(Button) 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'. With the above config, the default size of all components that have size attribute will be 'small'.
### Start coding ### Start coding
@ -266,4 +272,5 @@ Build:
```bash ```bash
npm run build npm run build
``` ```
Please refer to each component's documentation to learn how to use them. Please refer to each component's documentation to learn how to use them.

37
examples/docs/es/installation.md
View File

@ -1,6 +1,7 @@
## Instalación ## Instalación
### npm ### npm
Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/). Instalar mediante npm es la forma recomendada ya que se integra facilmente con [webpack](https://webpack.js.org/).
```shell ```shell
@ -8,6 +9,7 @@ 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. 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 ```html
@ -20,39 +22,10 @@ Obtenga la última versión desde [unpkg.com/element-ui](https://unpkg.com/eleme
##Tip ##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. 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 ### 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/) Si esta usando un CDN, una página con Hello-World es fácil con Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/14/)
```html <iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<!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
Si esta usando npm y desea combinarlo con webpack, por favor continue a la siguiente página: Quick Start

220
examples/docs/es/quickstart.md
View File

@ -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. 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 <div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
> npm i -g vue-cli <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>
> mkdir my-project && cd my-project </div>
> vue init webpack
> npm i && npm i element-ui
```
### Importando Element ### Importando Element
@ -26,19 +23,21 @@ Puede importar Element completamente o solamente importar lo que necesite. Comen
#### Importando todo #### Importando todo
In main.js: 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({ new Vue({
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}) });
``` ```
El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado. El código anterior importa Element completamente. Nótese que el archivo CSS necesita ser incluido por separado.
#### En demanda #### En demanda
@ -52,28 +51,31 @@ npm install babel-plugin-component -D
``` ```
Luego edite .babelrc: Luego edite .babelrc:
```json ```json
{ {
"presets": [ "presets": [["es2015", { "modules": false }]],
["es2015", { "modules": false }] "plugins": [
], [
"plugins": [["component", { "component",
{
"libraryName": "element-ui", "libraryName": "element-ui",
"styleLibraryName": "theme-chalk" "styleLibraryName": "theme-chalk"
} }
]] ]
]
} }
``` ```
Luego, si necesita Button y Select, edite main.js: Luego, si necesita Button y Select, edite main.js:
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue';
import { Button, Select } from 'element-ui' import { Button, Select } from 'element-ui';
import App from './App.vue' import App from './App.vue';
Vue.component(Button.name, Button) Vue.component(Button.name, Button);
Vue.component(Select.name, Select) Vue.component(Select.name, Select);
/* or /* or
* Vue.use(Button) * Vue.use(Button)
* Vue.use(Select) * Vue.use(Select)
@ -82,13 +84,13 @@ Vue.component(Select.name, Select)
new Vue({ new Vue({
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}) });
``` ```
Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json)) Ejemplo completo (Referencia completa de componentes [components.json](https://github.com/ElemeFE/element/blob/master/components.json))
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue';
import { import {
Pagination, Pagination,
Dialog, Dialog,
@ -157,102 +159,107 @@ import {
MessageBox, MessageBox,
Message, Message,
Notification Notification
} from 'element-ui' } from 'element-ui';
Vue.use(Pagination) Vue.use(Pagination);
Vue.use(Dialog) Vue.use(Dialog);
Vue.use(Autocomplete) Vue.use(Autocomplete);
Vue.use(Dropdown) Vue.use(Dropdown);
Vue.use(DropdownMenu) Vue.use(DropdownMenu);
Vue.use(DropdownItem) Vue.use(DropdownItem);
Vue.use(Menu) Vue.use(Menu);
Vue.use(Submenu) Vue.use(Submenu);
Vue.use(MenuItem) Vue.use(MenuItem);
Vue.use(MenuItemGroup) Vue.use(MenuItemGroup);
Vue.use(Input) Vue.use(Input);
Vue.use(InputNumber) Vue.use(InputNumber);
Vue.use(Radio) Vue.use(Radio);
Vue.use(RadioGroup) Vue.use(RadioGroup);
Vue.use(RadioButton) Vue.use(RadioButton);
Vue.use(Checkbox) Vue.use(Checkbox);
Vue.use(CheckboxGroup) Vue.use(CheckboxGroup);
Vue.use(Switch) Vue.use(Switch);
Vue.use(Select) Vue.use(Select);
Vue.use(Option) Vue.use(Option);
Vue.use(OptionGroup) Vue.use(OptionGroup);
Vue.use(Button) Vue.use(Button);
Vue.use(ButtonGroup) Vue.use(ButtonGroup);
Vue.use(Table) Vue.use(Table);
Vue.use(TableColumn) Vue.use(TableColumn);
Vue.use(DatePicker) Vue.use(DatePicker);
Vue.use(TimeSelect) Vue.use(TimeSelect);
Vue.use(TimePicker) Vue.use(TimePicker);
Vue.use(Popover) Vue.use(Popover);
Vue.use(Tooltip) Vue.use(Tooltip);
Vue.use(Breadcrumb) Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem) Vue.use(BreadcrumbItem);
Vue.use(Form) Vue.use(Form);
Vue.use(FormItem) Vue.use(FormItem);
Vue.use(Tabs) Vue.use(Tabs);
Vue.use(TabPane) Vue.use(TabPane);
Vue.use(Tag) Vue.use(Tag);
Vue.use(Tree) Vue.use(Tree);
Vue.use(Alert) Vue.use(Alert);
Vue.use(Slider) Vue.use(Slider);
Vue.use(Icon) Vue.use(Icon);
Vue.use(Row) Vue.use(Row);
Vue.use(Col) Vue.use(Col);
Vue.use(Upload) Vue.use(Upload);
Vue.use(Progress) Vue.use(Progress);
Vue.use(Badge) Vue.use(Badge);
Vue.use(Card) Vue.use(Card);
Vue.use(Rate) Vue.use(Rate);
Vue.use(Steps) Vue.use(Steps);
Vue.use(Step) Vue.use(Step);
Vue.use(Carousel) Vue.use(Carousel);
Vue.use(CarouselItem) Vue.use(CarouselItem);
Vue.use(Collapse) Vue.use(Collapse);
Vue.use(CollapseItem) Vue.use(CollapseItem);
Vue.use(Cascader) Vue.use(Cascader);
Vue.use(ColorPicker) Vue.use(ColorPicker);
Vue.use(Container) Vue.use(Container);
Vue.use(Header) Vue.use(Header);
Vue.use(Aside) Vue.use(Aside);
Vue.use(Main) Vue.use(Main);
Vue.use(Footer) Vue.use(Footer);
Vue.use(Loading.directive) Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message Vue.prototype.$message = Message;
``` ```
### Configuración global ### 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: 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： Importando Element completamente：
```JS
import Vue from 'vue' ```js
import Element from 'element-ui' import Vue from 'vue';
Vue.use(Element, { size: 'small' }) import Element from 'element-ui';
Vue.use(Element, { size: 'small' });
``` ```
Importando Element parcialmente： Importando Element parcialmente：
```JS
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' } ```js
Vue.use(Button) 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`. Con la anterior configuración, el tamaño por defecto de todos los componentes que tienen el atributo `size` será `small`.
### Empiece ya! ### Empiece ya!
Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Inicie el modo de desarrollo: Ahora ha incorporado Vue y Element a su proyecto y es el momento para comenzar a programar. Inicie el modo de desarrollo:
```bash ```bash
@ -264,4 +271,5 @@ Build:
```bash ```bash
npm run build 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.

35
examples/docs/zh-CN/installation.md
View File

@ -1,6 +1,7 @@
## 安装 ## 安装
### npm 安装 ### npm 安装
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。 推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
```shell ```shell
@ -8,6 +9,7 @@ npm i element-ui -S
``` ```
### CDN ### CDN
目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 目前可以通过 [unpkg.com/element-ui](https://unpkg.com/element-ui/) 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
```html ```html
@ -22,36 +24,9 @@ npm i element-ui -S
::: :::
### Hello world ### Hello world
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/) 通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/14/)
```html <iframe width="100%" height="600" src="//jsfiddle.net/hzfpyvg6/1213/embedded/html,result/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
<!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>
```
如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。 如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。

222
examples/docs/zh-CN/quickstart.md
View File

@ -8,16 +8,14 @@
如果不希望使用我们提供的模板，请继续阅读。 如果不希望使用我们提供的模板，请继续阅读。
### 使用 vue-cli ### 使用 Nuxt.js
我们还可以使用 [vue-cli](https://github.com/vuejs/vue-cli) 初始化项目，命令如下：
```shell 我们还可以使用 [Nuxt.js](https://nuxtjs.org)：
> npm i -g vue-cli
> mkdir my-project && cd my-project <div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
> vue init webpack <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>
> npm i && npm i element-ui </div>
```
### 引入 Element ### 引入 Element
@ -26,19 +24,21 @@
#### 完整引入 #### 完整引入
在 main.js 中写入以下内容： 在 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({ new Vue({
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}) });
``` ```
以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。 以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
#### 按需引入 #### 按需引入
@ -52,28 +52,31 @@ npm install babel-plugin-component -D
``` ```
然后，将 .babelrc 修改为： 然后，将 .babelrc 修改为：
```json ```json
{ {
"presets": [ "presets": [["es2015", { "modules": false }]],
["es2015", { "modules": false }] "plugins": [
], [
"plugins": [["component", { "component",
{
"libraryName": "element-ui", "libraryName": "element-ui",
"styleLibraryName": "theme-chalk" "styleLibraryName": "theme-chalk"
} }
]] ]
]
} }
``` ```
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容： 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue';
import { Button, Select } from 'element-ui' import { Button, Select } from 'element-ui';
import App from './App.vue' import App from './App.vue';
Vue.component(Button.name, Button) Vue.component(Button.name, Button);
Vue.component(Select.name, Select) Vue.component(Select.name, Select);
/* 或写为 /* 或写为
* Vue.use(Button) * Vue.use(Button)
* Vue.use(Select) * Vue.use(Select)
@ -82,13 +85,13 @@ Vue.component(Select.name, Select)
new Vue({ new Vue({
el: '#app', el: '#app',
render: h => h(App) render: h => h(App)
}) });
``` ```
完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准） 完整组件列表和引入方式（完整组件列表以 [components.json](https://github.com/ElemeFE/element/blob/master/components.json) 为准）
```javascript ```javascript
import Vue from 'vue' import Vue from 'vue';
import { import {
Pagination, Pagination,
Dialog, Dialog,
@ -157,100 +160,104 @@ import {
MessageBox, MessageBox,
Message, Message,
Notification Notification
} from 'element-ui' } from 'element-ui';
Vue.use(Pagination) Vue.use(Pagination);
Vue.use(Dialog) Vue.use(Dialog);
Vue.use(Autocomplete) Vue.use(Autocomplete);
Vue.use(Dropdown) Vue.use(Dropdown);
Vue.use(DropdownMenu) Vue.use(DropdownMenu);
Vue.use(DropdownItem) Vue.use(DropdownItem);
Vue.use(Menu) Vue.use(Menu);
Vue.use(Submenu) Vue.use(Submenu);
Vue.use(MenuItem) Vue.use(MenuItem);
Vue.use(MenuItemGroup) Vue.use(MenuItemGroup);
Vue.use(Input) Vue.use(Input);
Vue.use(InputNumber) Vue.use(InputNumber);
Vue.use(Radio) Vue.use(Radio);
Vue.use(RadioGroup) Vue.use(RadioGroup);
Vue.use(RadioButton) Vue.use(RadioButton);
Vue.use(Checkbox) Vue.use(Checkbox);
Vue.use(CheckboxButton) Vue.use(CheckboxButton);
Vue.use(CheckboxGroup) Vue.use(CheckboxGroup);
Vue.use(Switch) Vue.use(Switch);
Vue.use(Select) Vue.use(Select);
Vue.use(Option) Vue.use(Option);
Vue.use(OptionGroup) Vue.use(OptionGroup);
Vue.use(Button) Vue.use(Button);
Vue.use(ButtonGroup) Vue.use(ButtonGroup);
Vue.use(Table) Vue.use(Table);
Vue.use(TableColumn) Vue.use(TableColumn);
Vue.use(DatePicker) Vue.use(DatePicker);
Vue.use(TimeSelect) Vue.use(TimeSelect);
Vue.use(TimePicker) Vue.use(TimePicker);
Vue.use(Popover) Vue.use(Popover);
Vue.use(Tooltip) Vue.use(Tooltip);
Vue.use(Breadcrumb) Vue.use(Breadcrumb);
Vue.use(BreadcrumbItem) Vue.use(BreadcrumbItem);
Vue.use(Form) Vue.use(Form);
Vue.use(FormItem) Vue.use(FormItem);
Vue.use(Tabs) Vue.use(Tabs);
Vue.use(TabPane) Vue.use(TabPane);
Vue.use(Tag) Vue.use(Tag);
Vue.use(Tree) Vue.use(Tree);
Vue.use(Alert) Vue.use(Alert);
Vue.use(Slider) Vue.use(Slider);
Vue.use(Icon) Vue.use(Icon);
Vue.use(Row) Vue.use(Row);
Vue.use(Col) Vue.use(Col);
Vue.use(Upload) Vue.use(Upload);
Vue.use(Progress) Vue.use(Progress);
Vue.use(Badge) Vue.use(Badge);
Vue.use(Card) Vue.use(Card);
Vue.use(Rate) Vue.use(Rate);
Vue.use(Steps) Vue.use(Steps);
Vue.use(Step) Vue.use(Step);
Vue.use(Carousel) Vue.use(Carousel);
Vue.use(CarouselItem) Vue.use(CarouselItem);
Vue.use(Collapse) Vue.use(Collapse);
Vue.use(CollapseItem) Vue.use(CollapseItem);
Vue.use(Cascader) Vue.use(Cascader);
Vue.use(ColorPicker) Vue.use(ColorPicker);
Vue.use(Container) Vue.use(Container);
Vue.use(Header) Vue.use(Header);
Vue.use(Aside) Vue.use(Aside);
Vue.use(Main) Vue.use(Main);
Vue.use(Footer) Vue.use(Footer);
Vue.use(Loading.directive) Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message Vue.prototype.$message = Message;
``` ```
### 全局配置 ### 全局配置
在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 `size` 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下： 在引入 Element 时，可以传入一个全局配置对象。该对象目前仅支持 `size` 字段，用于改变组件的默认尺寸。按照引入 Element 的方式，具体操作如下：
完整引入 Element： 完整引入 Element：
```JS
import Vue from 'vue' ```js
import Element from 'element-ui' import Vue from 'vue';
Vue.use(Element, { size: 'small' }) import Element from 'element-ui';
Vue.use(Element, { size: 'small' });
``` ```
按需引入 Element： 按需引入 Element：
```JS
import Vue from 'vue'
import { Button } from 'element-ui'
Vue.prototype.$ELEMENT = { size: 'small' } ```js
Vue.use(Button) import Vue from 'vue';
import { Button } from 'element-ui';
Vue.prototype.$ELEMENT = { size: 'small' };
Vue.use(Button);
``` ```
按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'。 按照以上设置，项目中所有拥有 `size` 属性的组件的默认尺寸均为 'small'。
### 开始使用 ### 开始使用
@ -266,4 +273,5 @@ npm run dev
```bash ```bash
npm run build npm run build
``` ```
各个组件的使用方法请参阅它们各自的文档。 各个组件的使用方法请参阅它们各自的文档。