【Vue.js入門】Hello Worldの表示

Contents

初期フォルダ構成

Vueのインストールを終えた後の、初期のファイル構成は次のようになっています。

画面は、Visual Studio Code です。エディターは任意のものをご利用ください。

次を確認しましょう。
components ディレクトリの配下に、HelloWorld.vueファイルが存在します。

views ディレクトリの配下に、About.vueファイルと Home.vue ファイルが存在します。

App.vue ファイルも存在します。

Macの場合は、ターミナル、Windowsの場合は、コマンドプロンプトでVueを実行します。

npm run serve

お使いのブラウザのアドレスバーに、http://localhost:8080/ を入力して開きます。

現在は、次のように表示されています。

App.vueは変更せずに確認のみ行います。
次の記述で、他のページへのリンクを設定している事を確認してください。

<router-link to="/">Home</router-link>

components ディレクトリの HelloWorld.vue の内容を削除します。

この状態でブラウザを確認すると、ロゴマークのみになります。

それでは、ブラウザに「こんにちは、Vue! 」と表示させます。

template部分に {{ message }} と記述します。
messageは、任意の変数名です。

{{ message }}の中身を script のdata部分に記述します。

最後にブラウザで変更結果を確認します。

messageを変更して、HelloWorldに変更してみます。

次のように表示されます。

今回は、Vueの初期ファイル構成と、 script を使用した、文字の表示方法を書きました。
最後までお読みいただきありがとうございました。