Vue.jsの開発を始めるまでの下準備と、Vue.jsで必ず必要になるimportについて、正確に理解したいと思います。
WebCLIとは
WebCLIとは、Vue.jsで作成するアプリの骨格を作ってくれるコマンドラインツールのことです。
Vue.jsを学習する中で、最初はCDN経由でVue.jsを呼び出して使っている方も多くいると思います。
CDNとはコンテンツを配布するためのネットワークのことです。
WebCLIを使うと、プロジェクトを作成するのもターミナル経由で行うことができるようになります。
vue create プロジェクト名
でプロジェクトの作成をすることができます。
プロジェクトの骨格
CLI経由で作成されたプロジェクトは多くのファイルから構成されていますが、主に使うのはsrc（ソースコード）に入っているファイルになります。
components
コンポーネント。細かく使い回す部品を管理するフォルダ
views
ページに関するvueファイルを入れるフォルダ。
App.vue
アプリ共通で管理するコンポーネントが集まったファイル。ヘッダーやフッターなどが入っている。
main.js
最初に読み込まれるファイル。この中に、最初に読み込ませたいファイル、やるべき処理を入れておく。
main.jsには以下のようなコードがある。
new Vue({
router,
render: function (h) { return h(App) }
}).$mount('#app')
まず、 new Vue は新しくVueインスタンスを作成するということです。
その中にはオプションオブジェクトが入っており、これはこのようなコードに変換されます。
new Vue({
el: '#app',
components: { App },
template: '<App />'
})
つまり、アプリを開始したときにAppエレメントがインスタンスとして作成されるということです。