2021-08-24 13:36:48 +08:00
|
|
|
|
# インストール
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## 環境対応
|
|
|
|
|
|
|
|
|
|
|
|
- モダンブラウザ
|
|
|
|
|
|
|
|
|
|
|
|
|  |  |  |  |
|
|
|
|
|
|
| --- | --- | --- | --- |
|
|
|
|
|
|
| Edge | last 2 versions | last 2 versions | last 2 versions |
|
|
|
|
|
|
|
|
|
|
|
|
> IE11はVue3でサポートされていないため、ElementPlusもIE11以前のバージョンをサポートしていません。
|
|
|
|
|
|
|
|
|
|
|
|
## 現在のバージョン
|
|
|
|
|
|
|
|
|
|
|
|
ElementPlusは現在、急速に開発が進められています。
|
|
|
|
|
|
|
|
|
|
|
|
[](https://www.npmjs.org/package/element-plus)
|
|
|
|
|
|
|
|
|
|
|
|
## npmまたはyarnによるインストール
|
|
|
|
|
|
|
|
|
|
|
|
**パッケージマネージャー方式でのインストールを推奨します**。
|
|
|
|
|
|
[vite](https://vitejs.dev)、[webpack](https://webpack.js.org/)との相性が良いパッケージマネージャー方式でのインストールをお勧めします。
|
|
|
|
|
|
パッケージングツールです。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
|
|
|
|
|
```shell
|
2021-08-24 13:36:48 +08:00
|
|
|
|
$ npm install element-plus --save
|
2020-11-04 10:30:14 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
```shell
|
|
|
|
|
|
$ yarn add element-plus
|
|
|
|
|
|
```
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
ネットワーク環境が悪い場合は、ミラーリポジトリの利用をお勧めします
|
|
|
|
|
|
|
|
|
|
|
|
## ダイレクトブラウザ導入
|
|
|
|
|
|
|
|
|
|
|
|
ElementPlusは、ブラウザのHTMLタグによって直接導入され、`ElementPlus`はグローバルに使用することができます。
|
|
|
|
|
|
|
|
|
|
|
|
**CDN**による`ElementPlus`の本格的な導入は、**CDN**の提供者によって異なりますが、ここでは[unpkg](https://unpkg.com)と[jsdelivr](https://jsdelivr.com)を例に挙げます。
|
|
|
|
|
|
また、他の**CDN**プロバイダーを利用することもできます。
|
|
|
|
|
|
|
|
|
|
|
|
## unpkgの使用
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
|
|
|
|
|
```html
|
2021-08-24 13:36:48 +08:00
|
|
|
|
<head>
|
|
|
|
|
|
<!-- スタイルの紹介 -->
|
|
|
|
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css">
|
|
|
|
|
|
<!-- Vueの紹介 -->
|
|
|
|
|
|
<script src="//unpkg.com/vue@next"></script>
|
|
|
|
|
|
<!-- ElementPlusの紹介 -->
|
|
|
|
|
|
<script src="//unpkg.com/element-plus"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## jsDelivrの使用
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<!-- スタイルの紹介 -->
|
|
|
|
|
|
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css">
|
|
|
|
|
|
<!-- Vueの紹介 -->
|
|
|
|
|
|
<script src="//cdn.jsdelivr.net/npm/vue@next"></script>
|
|
|
|
|
|
<!-- ElementPlusの紹介 -->
|
|
|
|
|
|
<script src="//cdn.jsdelivr.net/npm/element-plus"></script>
|
|
|
|
|
|
</head>
|
2020-11-04 10:30:14 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
:::tip
|
2021-08-24 13:36:48 +08:00
|
|
|
|
**CDN**を使用して`ElementPlus`を導入したユーザーは、今後の`ElementPlus`のアップグレードが互換性のないアップデートの影響を受けないように、リンク先のアドレスでバージョンをロックすることを推奨します。
|
|
|
|
|
|
バージョンをロックするには、以下を参照してください。
|
|
|
|
|
|
[unpkg.com](https://unpkg.com)。
|
2020-11-04 10:30:14 +08:00
|
|
|
|
:::
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
## Hello world
|
|
|
|
|
|
|
|
|
|
|
|
CDN**のアプローチでは、`ElementPlus`を使ってHello worldページを簡単に書くことができます。[オンラインデモ](https://codepen.io/iamkun/pen/YzWMaVr)
|
2020-11-04 10:30:14 +08:00
|
|
|
|
|
2020-11-18 22:15:09 +08:00
|
|
|
|
<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>.
|
2020-11-04 10:30:14 +08:00
|
|
|
|
</iframe>
|
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
|
npm / yarn経由でインストールし、パッケージングツールで使用したい場合は、次のセクションをお読みください：【クイックスタート】。(/#/jp/component/quickstart)。
|
