• 2022/2/15
• 7分

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

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

今回はVue.jsで使える便利なライブラリ「Element Ui」を導入するまでの方法と発生したエラーの解決方法をまとめていきます。

Element Uiとは？

Element Ui

「Element Ui」はVue.jsバージョン2.0ベースのコンポーネントライブラリです。汎用性の高いUi(ユーザーインターフェース)のコンポーネントがたくさん用意されています。ユーザーインターフェースとはボタンとかダイアログとかユーザーが操作しやすいようにする部品のことです。

使用方法は簡単でライブラリをプロジェクトにインストールした後、HTMLにelement独自のタグを埋め込むだけです。

<el-button round>丸いボタン</el-button>
<el-input placeholder="入力してください" v-model="input"></el-input>

HTMLに記述した独自のタグはレンダリング時に既存のHTML要素に置換されて表示されます。

導入方法

Element UIを導入する方法は2つ。

• プロジェクトにインストール
• CDN(コンテンツデリバリネットワーク)で読み込む

CDNで読み込むのはテストやちょっと試してみたい時におすすめです。大概の人はプロジェクトにインストールすると思うのでその方法をまとめていきます。ちなみにCDNで読み込むには以下のコードを使いたいHTMLファイルに追加するだけです。

<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

コマンドラインでプロジェクトにインストール

CDNではなくコマンドラインの場合の手順をまとめていきます。まずはインストールするVue.jsプロジェクトを作成します。今回はVue CLIを使って環境を作っていくことにします。

カレントディレクトリをデスクトップに移したら、以下のコマンドで作成、プリセットはデフォルトでVueのバージョンが2の方を選択します。

$ vue create element-app

? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
  Manually select features
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜  
🎉  Successfully created project element-app.
👉  Get started with the following commands:

 $ cd element-app
 $ yarn serve

これでプロジェクトが作成できました。表示されているコマンドを入力してデモページを表示させてみます。

$ cd element-app
$ yarn serve

続いて実際にElement Uiをプロジェクトの中に組み込みます。一度サーバーを「Ctrl+C」で停止させ追加するコマンドを入力します。

$ vue add element

するとElement Uiを組み込むレベルを選択できます。

? How do you want to import Element? (Use arrow keys)
❯ Fully import
Import on demand

選択できるのはFully import(フルインストール)とImport on demand(オンデマンド)の2つです。オンデマンドは「要求する」という意味で必要なものだけを選択してインストールできます。

フルインストールするには先程の選択画面でFully importを選択して進んでいきます。

続いて「ElementのSCSS変数を上書きしますか？」を「N(No)」

? Do you wish to overwrite Element's SCSS variables? N

「ロードするロケール(地域設定)を選択してください」を上下キーでカーソルを合わせて「ja(日本)」にします。

? Choose the locale you want to load
  ja

これでインストールは完了です。再度サーバーを立ち上げてVue.jsプロジェクトの真ん中にelementのボタンがあれば成功です。

Element Uiのオンデマンドインストール方法

続いてオンデマンドにインストールする方法を見ていきます。

先ほどと同じ手順でVue.jsプロジェクトを作成し、Element Uiをインストールするコマンドを記述します。

? How do you want to import Element? (Use arrow keys)
Fully import
❯ Import on demand

SCSS変数の件はなしに「ロードするロケール(地域設定)を選択してください」に飛ぶので上下キーでカーソルを合わせて「ja(日本)」にします。

success Saved lockfile.
✨  Done in 5.17s.
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-element

これでインストールは完了です。こちらもサーバーを立ち上げて真ん中にelementのボタンがあれば成功です。

オンデマンドインストールのコンポーネント追加方法

オンデマンドインストールの場合はデフォルトで<el-button>しか使えるようになっていません。ここから違うコンポーネントを追加する方法をまとめていきます。

まずは作成したプロジェクトの中身を見てみます。ここで重要なのは★マークをつけたplugins ＞ element.jsです。

├── Vue CLIプロジェクト
│    ├── node_modules
│    ├── babel.config.js
│    ├── package.json
│    ├── public
│    ├── README.md
│    ├── src
│          ├── App.vue
│          ├── assets
│          ├── components
│          ├── main.js
│          └── plugins
│                  └── ★ element.js
│    └── yarn.lock

開いてみるとimportしているコンポーネントがButtonのみになっています。そしてもちろんVueインスタンスで使用可能(use)としているのもButtonだけなのでこの部分に追加していけばOKです。

変更前のelements.js

import Vue from 'vue'
import { Button } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/ja'
import locale from 'element-ui/lib/locale'

locale.use(lang)

Vue.use(Button)

読み込みたいのが1つだけであればButton部分をInputなどに変更すればそれだけ使えるようになります。複数のコンポーネントを使いたい時は以下のようにします。

複数用に変更したelements.js

import Vue from 'vue'
import { Button, Input } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/ja'
import locale from 'element-ui/lib/locale'

locale.use(lang)

Vue.use(Button)
Vue.use(Input)

複数用にさらに変更したelements.js

import Vue from 'vue'
import { Button, Input } from 'element-ui'
import lang from 'element-ui/lib/locale/lang/ja'
import locale from 'element-ui/lib/locale'

locale.use(lang)
const components = [
    Button,
    Input
];

const Element = {
    install(Vue) {
        components.forEach(component => {
            Vue.component(component.name, component)
        })
    }
}
Vue.use(Element, { locale })

他にもコンポーネントはたくさんありますので公式サイトを確認して使いたいものを組み込んでみてください！

import Vue from 'vue';
import {
  Pagination,
  Dialog,
  Loading,
  Message,
  Notification
  ~~~~~~~~~~~~~~~~~~などなど
} from 'element-ui';

発生したエラー

フルインストールを実行しようとした際に「ElementのSCSS変数を上書きしますか？」を「y(Yes)」で実行すると以下のようなエラーが出てしまいました。

info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this 
 ERROR  command failed: yarn 

yarnに何か問題があるようですが、私の知識では原因が突き止められませんでした。しかしここを「N(No)」で実行すれば問題なく動いたのでとりあえず解決としておきました。

yarn -v
1.22.17

Vue 3(バージョン3)にElement Uiは使えない？

Element UiはVue2ベースで作成されたライブラリなのでVue 3でインストールしてもなんとか使えそうなきがしますが、通常通りに進めても以下のようなエラーが出てしまいました。

 warning  in ./src/plugins/element.js
"export 'default' (imported as 'Vue') was not found in 'vue'

解決できそうなきもしますがElement PlusというVue 3に対応したUiライブラリができていたのでこちらを使うのが良いかもしれません。

Element Plus

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。