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エレメントがインスタンスとして作成されるということです。