mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
105 lines
4.6 KiB
Markdown
105 lines
4.6 KiB
Markdown
---
|
|
title: Installation
|
|
lang: en-US
|
|
---
|
|
|
|
# Installation
|
|
|
|
## Compatibility
|
|
|
|
Element Plus can run on browsers that support [ES2018](https://caniuse.com/?feats=mdn-javascript_builtins_regexp_dotall,mdn-javascript_builtins_regexp_lookbehind_assertion,mdn-javascript_builtins_regexp_named_capture_groups,mdn-javascript_builtins_regexp_property_escapes,mdn-javascript_builtins_symbol_asynciterator,mdn-javascript_functions_method_definitions_async_generator_methods,mdn-javascript_grammar_template_literals_template_literal_revision,mdn-javascript_operators_destructuring_rest_in_objects,mdn-javascript_operators_spread_spread_in_destructuring,promise-finally) and [ResizeObserver](https://caniuse.com/resizeobserver).
|
|
If you really need to support outdated browsers, please add [Babel](https://babeljs.io/) and Polyfill yourself.
|
|
|
|
Since Vue 3 no longer supports IE11, Element Plus does not support IE either.
|
|
|
|
|  |  |  |  |
|
|
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ |
|
|
| Edge ≥ 79 | Firefox ≥ 78 | Chrome ≥ 64 | Safari ≥ 12 |
|
|
|
|
### Version
|
|
|
|
Element Plus is currently in a rapid development iteration.
|
|
|
|
[](https://www.npmjs.org/package/element-plus)
|
|
|
|
## Using Package Manager
|
|
|
|
**We recommend using the package manager (NPM, [Yarn](https://classic.yarnpkg.com/lang/en/), [pnpm](https://pnpm.io/)) to install Element Plus**,
|
|
so that you can utilize bundlers like [Vite](https://vitejs.dev) and
|
|
[webpack](https://webpack.js.org/).
|
|
|
|
```shell
|
|
# Choose a package manager you like.
|
|
|
|
# NPM
|
|
$ npm install element-plus --save
|
|
|
|
# Yarn
|
|
$ yarn add element-plus
|
|
|
|
# pnpm
|
|
$ pnpm install element-plus
|
|
```
|
|
|
|
If your network environment is not good, it is recommended to use a mirror registry [cnpm](https://github.com/cnpm/cnpm) or [Alibaba](https://registry.npmmirror.com/).
|
|
|
|
## Import in Browser
|
|
|
|
Import Element Plus through browser HTML tags directly, and use global variable `ElementPlus`.
|
|
|
|
According to different CDN providers, there are different introduction methods.
|
|
Here we use [unpkg](https://unpkg.com) and [jsDelivr](https://jsdelivr.com) as example.
|
|
You can also use other CDN providers.
|
|
|
|
### unpkg
|
|
|
|
```html
|
|
<head>
|
|
<!-- Import style -->
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
|
|
<!-- Import Vue 3 -->
|
|
<script src="//unpkg.com/vue@next"></script>
|
|
<!-- Import component library -->
|
|
<script src="//unpkg.com/element-plus"></script>
|
|
</head>
|
|
```
|
|
|
|
### jsDelivr
|
|
|
|
```html
|
|
<head>
|
|
<!-- Import style -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"
|
|
/>
|
|
<!-- Import Vue 3 -->
|
|
<script src="//cdn.jsdelivr.net/npm/vue@next"></script>
|
|
<!-- Import component library -->
|
|
<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
|
|
</head>
|
|
```
|
|
|
|
:::tip
|
|
|
|
We recommend using CDN to import Element Plus users to lock the version
|
|
on the link address, so as not to be affected by incompatible updates when Element Plus
|
|
is upgraded in the future. Please check [unpkg.com](https://unpkg.com) for
|
|
the method to lock the version.
|
|
|
|
:::
|
|
|
|
## Hello World
|
|
|
|
With CDN, we can easily use Element Plus to
|
|
write a Hello World page. [Online Demo](https://codepen.io/iamkun/pen/YzWMaVr)
|
|
|
|
<iframe height="469" style="width: 100%;" scrolling="no" title="YzWMaVr" src="https://codepen.io/iamkun/embed/YzWMaVr?height=469&theme-id=light&default -tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
|
|
See the Pen <a href='https://codepen.io/iamkun/pen/YzWMaVr'>YzWMaVr</a> by iamkun
|
|
(<a href='https://codepen.io/iamkun'>@iamkun</a>) on <a href='https://codepen.io'>CodePen</a>.
|
|
</iframe>
|
|
|
|
If you are installing via package manager and want to use it with
|
|
a packaging tool, please read the
|
|
next section: [Quick Start](/en-US/guide/quickstart).
|