【Vue.js】Element-uiの導入方法!オンデマンドとVue3対応版

この記事からわかること
- Vue.jsのライブラリElement Uiとは?
- Vue CLI版でのプロジェクト作成時の導入方法
- オンデマンドインストールのやり方
- Vue 3(バージョン3)にインストールはできない?
index
[open]
\ アプリをリリースしました /
今回はVue.jsで使える便利なライブラリ「Element Ui」を導入するまでの方法と発生したエラーの解決方法をまとめていきます。
Element Uiとは?
「Element Ui」はVue.jsバージョン2.0ベースのコンポーネントライブラリです。汎用性の高いUi(ユーザーインターフェース)のコンポーネントがたくさん用意されています。ユーザーインターフェースとはボタンとかダイアログとかユーザーが操作しやすいようにする部品のことです。

使用方法は簡単でライブラリをプロジェクトにインストールした後、HTMLにelement独自のタグを埋め込むだけです。
HTMLに記述した独自のタグはレンダリング時に既存のHTML要素に置換されて表示されます。

導入方法
Element UIを導入する方法は2つ。
- プロジェクトにインストール
- CDN(コンテンツデリバリネットワーク)で読み込む
CDNで読み込むのはテストやちょっと試してみたい時におすすめです。大概の人はプロジェクトにインストールすると思うのでその方法をまとめていきます。ちなみにCDNで読み込むには以下のコードを使いたいHTMLファイルに追加するだけです。
コマンドラインでプロジェクトにインストール
CDNではなくコマンドラインの場合の手順をまとめていきます。まずはインストールするVue.jsプロジェクトを作成します。今回はVue CLIを使って環境を作っていくことにします。
カレントディレクトリをデスクトップに移したら、以下のコマンドで作成、プリセットはデフォルトでVueのバージョンが2の方を選択します。
これでプロジェクトが作成できました。表示されているコマンドを入力してデモページを表示させてみます。

続いて実際にElement Uiをプロジェクトの中に組み込みます。一度サーバーを「Ctrl+C」で停止させ追加するコマンドを入力します。
するとElement Uiを組み込むレベルを選択できます。
選択できるのはFully import(フルインストール)とImport on demand(オンデマンド)の2つです。オンデマンドは「要求する」という意味で必要なものだけを選択してインストールできます。
フルインストールするには先程の選択画面でFully import
を選択して進んでいきます。
続いて「ElementのSCSS変数を上書きしますか?」を「N(No)」
「ロードするロケール(地域設定)を選択してください」を上下キーでカーソルを合わせて「ja(日本)」にします。
これでインストールは完了です。再度サーバーを立ち上げてVue.jsプロジェクトの真ん中にelementのボタンがあれば成功です。

Element Uiのオンデマンドインストール方法
続いてオンデマンドにインストールする方法を見ていきます。
先ほどと同じ手順でVue.jsプロジェクトを作成し、Element Uiをインストールするコマンドを記述します。
SCSS変数の件はなしに「ロードするロケール(地域設定)を選択してください」に飛ぶので上下キーでカーソルを合わせて「ja(日本)」にします。
これでインストールは完了です。こちらもサーバーを立ち上げて真ん中にelementのボタンがあれば成功です。
オンデマンドインストールのコンポーネント追加方法
オンデマンドインストールの場合はデフォルトで<el-button>
しか使えるようになっていません。ここから違うコンポーネントを追加する方法をまとめていきます。
まずは作成したプロジェクトの中身を見てみます。ここで重要なのは★マークをつけたplugins > element.jsです。
開いてみるとimport
しているコンポーネントがButton
のみになっています。そしてもちろんVueインスタンスで使用可能(use
)としているのもButton
だけなのでこの部分に追加していけばOKです。
変更前のelements.js
読み込みたいのが1つだけであればButton
部分をInput
などに変更すればそれだけ使えるようになります。複数のコンポーネントを使いたい時は以下のようにします。
複数用に変更したelements.js
複数用にさらに変更したelements.js
他にもコンポーネントはたくさんありますので公式サイトを確認して使いたいものを組み込んでみてください!
おすすめ記事:Element Ui コンポーネントの種類
発生したエラー
フルインストールを実行しようとした際に「ElementのSCSS変数を上書きしますか?」を「y(Yes)」で実行すると以下のようなエラーが出てしまいました。
yarnに何か問題があるようですが、私の知識では原因が突き止められませんでした。しかしここを「N(No)」で実行すれば問題なく動いたのでとりあえず解決としておきました。
Vue 3(バージョン3)にElement Uiは使えない?
Element UiはVue2ベースで作成されたライブラリなのでVue 3でインストールしてもなんとか使えそうなきがしますが、通常通りに進めても以下のようなエラーが出てしまいました。
解決できそうなきもしますがElement PlusというVue 3に対応したUiライブラリができていたのでこちらを使うのが良いかもしれません。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。