2016-11-13 03:58:45 +00:00
## Installation
2016-10-28 03:52:43 +00:00
2016-11-13 03:58:45 +00:00
### npm
2016-11-26 21:42:33 +00:00
Installing with npm is recommended and it works seamlessly with [webpack ](https://webpack.js.org/ ).
2016-10-28 03:52:43 +00:00
2017-10-30 10:14:27 +00:00
:::tip
Note that this doc is for 1.x, so you need the `legacy` tag when installing.
:::
2016-10-28 03:52:43 +00:00
```shell
2017-10-30 10:14:27 +00:00
npm i element-ui@legacy -S
2016-10-28 03:52:43 +00:00
```
### CDN
2017-10-27 09:41:04 +00:00
Get the latest version from [unpkg.com/element-ui ](https://unpkg.com/element-ui@1.4/ ) , and import JavaScript and CSS file in your page.
2016-10-28 03:52:43 +00:00
```html
2016-11-13 03:58:45 +00:00
<!-- import CSS -->
2017-10-27 09:41:04 +00:00
< link rel = "stylesheet" href = "https://unpkg.com/element-ui@1.4/lib/theme-default/index.css" >
2016-11-13 03:58:45 +00:00
<!-- import JavaScript -->
2017-10-27 09:41:04 +00:00
< script src = "https://unpkg.com/element-ui@1.4/lib/index.js" > < / script >
2016-10-28 03:52:43 +00:00
```
2017-10-30 10:14:27 +00:00
:::tip
We recommend our users to lock Element's version when using CDN. For example, if you're using Element 1.4.8, you can lock CSS and JavaScript files like this: `https://unpkg.com/element-ui@1.4.8/lib/theme-default/index.css` , `https://unpkg.com/element-ui@1.4.8/lib/index.js` .
:::
2016-10-28 03:52:43 +00:00
### Hello world
2017-10-27 09:41:04 +00:00
If you are using CDN, a hello-world page is easy with Element. [Online Demo ](https://jsfiddle.net/hzfpyvg6/18/ )
2016-10-28 03:52:43 +00:00
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
2016-11-13 03:58:45 +00:00
<!-- import CSS -->
2017-10-27 09:41:04 +00:00
< link rel = "stylesheet" href = "https://unpkg.com/element-ui@1.4/lib/theme-default/index.css" >
2016-10-28 03:52:43 +00:00
< / head >
< body >
< div id = "app" >
2016-11-20 14:39:33 +00:00
< el-button @click =" visible = true" > Button</ el-button >
2016-10-28 03:52:43 +00:00
< el-dialog v-model = "visible" title = "Hello world" >
2016-11-13 03:58:45 +00:00
< p > Try Element< / p >
2016-10-28 03:52:43 +00:00
< / el-dialog >
< / div >
< / body >
2016-11-16 12:06:02 +00:00
<!-- import Vue before Element -->
2017-10-30 10:14:27 +00:00
< script src = "https://unpkg.com/vue@2.5/dist/vue.js" > < / script >
2016-11-13 03:58:45 +00:00
<!-- import JavaScript -->
2017-10-27 09:41:04 +00:00
< script src = "https://unpkg.com/element-ui@1.4/lib/index.js" > < / script >
2016-10-28 03:52:43 +00:00
< script >
new Vue({
el: '#app',
data: function() {
return { visible: false }
}
})
< / script >
< / html >
```
2016-11-26 21:42:33 +00:00
If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.
