【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 を使用した、文字の表示方法を書きました。
最後までお読みいただきありがとうございました。

返信を残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください