Element UI を使ってフォームコンポーネントを構築する

はじめに

このプロジェクトでは、人気のある Vue.js UI ライブラリである Element UI を使ってフォームコンポーネントを作成し、Web アプリケーションに統合する方法を学びます。

👀 プレビュー

完成したフォームコンポーネントのプレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

初期のコード構造とファイル構成を理解する方法
フォームが消える原因となる問題を特定して修正する方法
Web アプリケーションでフォームが正しく表示されるようにする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Vue.js アプリケーションで Element UI を使ってフォームコンポーネントを作成する
UI コンポーネントの統合に関連する問題をトラブルシューティングして修正する
Web アプリケーションで外部ライブラリを適切に含めて参照する重要性を理解する

プロジェクト構造をセットアップする

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── element-ui-2.15.10
│   ├── index.css
│   └── index.js
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── myform.vue

ここで：

index.html はメインページです。
myform.vue はカプセル化されたフォームコンポーネントファイルです。
js は Vue.js 関連ファイルを格納するフォルダです。
element-ui-2.15.10 は element-ui ファイルを格納するフォルダです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動でページを更新して、ブラウザで以下のような表示を確認します。

画像の説明

初期コードにあるフォームコンポーネント myform はブラウザに表示されません。

問題を特定する

このステップでは、プロジェクトに提供された初期コードを学びながら、フォームが消えた原因となる問題を特定します。

index.html ファイルを開きます。これはアプリケーションのエントリーポイントとなるメインの HTML ファイルです。
index.html のコードを調べます。必要な Vue.js と Element UI ファイルが含まれており、myform.vue コンポーネントへの参照も含まれていることがわかります。
myform.vue ファイルを開きます。これは表示するフォームを含む Vue コンポーネントです。
myform.vue ファイルの構造を理解します。フォームコンポーネントに必要な HTML、JavaScript、CSS が含まれています。
index.html ファイルで参照されているにもかかわらず、ブラウザにフォームが表示されないことに気づきます。
もう一度 index.html ファイルを注意深く見直します。
element-ui-2.15.10/index.js ファイルに index.html が導入されていないことに気づきます。

問題を修正する

このステップでは、問題を修正して、フォームが正しく表示されるようにします。

index.html ファイルを開きます。
<head> の中の下部に element-ui-2.15.10/index.js ファイルの導入を追加します。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanished Into Thin Air</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/http-vue-loader.js"></script>
    <!-- element-ui style -->
    <link rel="stylesheet" href="./element-ui-2.15.10/index.css" />

    <!-- TODO: element-ui js -->
    <script src="./element-ui-2.15.10/index.js"></script>
  </head>
  <!--... -->
</html>

index.html ファイルの変更を保存します。
ブラウザを更新して、更新されたページを確認します。
以下の画像に示すように、フォームが期待通りに表示されていることを確認します。