main.js が Vue のアプリケーションを始めるためのエントリーポイントになっている

色々なファイルがありますが、まずは main.js から全て始まります。

このようにアプリケーションの最初に読み込まれて、実行される部分をエントリーポイントと呼びます。

ここから全ての Vue アプリケーションがスタートします。

main.js は普通の JavaScript のファイルなので JS が実行できる

main.js は当然 JavaScript ファイルなので、一旦全てを消して、単純な JavaScript を実行することもできます。例えば以下のように console に出力してみましょう。

console.log('Hello Vue!!')

当然ですが Vue.js は JavaScript のライブラリですので、JavaScript ファイルの中で実行されることで起動します。

new Vue() で Vue App を起動する

new Vue() によって Vue App を立ち上げます。

このメソッドに与えた引数によって様々な設定をしていますが、これは後ほど説明します。

重要なのは、src/App.vue ファイルを読み込んで、ここからコンポーネントの連鎖がスタートするということです。

(コンポーネントというのは部品という意味で、Vue に限らず最近のライブラリでは、細かい部品を組み合わせてアプリケーションを作っていきます。最初の1個目の部品である src/App.vue を読み込んで、Vue App の起動時にこれを起点として設定しています。)

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>"
});

src/App.vue の中身を軽くみてみよう

いろんなことが書いてありますが、まずは <template></template> の部分をみてみましょう。

ここを少し書き換えてみます。

<template>
  <div id="app">
    Hello, Vue!!
  </div>
</template>

文字が表示されましたね！

そうです、ここはほとんど HTML のようなものです。

色々変更してみましょう。