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

初期フォルダ構成

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

vue.js

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

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

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

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

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

npm run serve

vue.js

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

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

vue.js

App.vue

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

<router-link to="/">Home</router-link>
vue.js

HelloWorld.vue

components ディレクトリの HelloWorld.vue の内容を削除します。
vue.js
この状態でブラウザを確認すると、ロゴマークのみになります。
vue.js
それでは、ブラウザに 「こんにちは、Vue! 」と表示させます。
template部分に {{ message }} と記述します。
messageは、任意の変数名です。
{{ message }}の中身を script のdata部分に記述します。
vue.js
最後にブラウザで変更結果を確認します。
vue.js
messageを変更して、HelloWorldに変更してみます。
vue.js
次のように表示されます。
vue.js

まとめ

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

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.