初期フォルダ構成
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
App.vueは変更せずに確認のみ行います。
次の記述で、他のページへのリンクを設定している事を確認してください。
<router-link to="/">Home</router-link>
HelloWorld.vue
components ディレクトリの HelloWorld.vue の内容を削除します。
この状態でブラウザを確認すると、ロゴマークのみになります。
それでは、ブラウザに 「こんにちは、Vue! 」と表示させます。
template部分に {{ message }} と記述します。
messageは、任意の変数名です。
messageは、任意の変数名です。
{{ message }}の中身を script のdata部分に記述します。
最後にブラウザで変更結果を確認します。
messageを変更して、HelloWorldに変更してみます。
次のように表示されます。
まとめ
今回は、Vueの初期ファイル構成と、 script を使用した、文字の表示方法を書きました。
最後までお読みいただきありがとうございました。
最後までお読みいただきありがとうございました。