Vue CLI ノート（2）：プロジェクトの構成とロードの仕組み

1.プロジェクトの構成

node_modules:
Vueのを構築するために必要なライブラリのすべてが保存されている場所のディレクトリ。

public:
プロジェクトをビルドする際のWebPACKを介して実行させたくない任意の静的な資産を配置

asset:
Webpackで最適化できるように、イメージやフォントなどのアセットの大部分をassetディレクトリに配置。

component:
Vueのアプリのコンポーネント、または構築ブロックを保管

views:
ビュー用のファイル、またはページを保存する場所

app.vue:
他のすべての構成要素が内にネストされていることをルートコンポーネント

main.js:
app.vueをレンダーリングし、それをDOMにマウント

2.ロードの流れ

main.jsの中で、まずVue,ルートコンポーネントApp.vue,routerとstoreをインポートします。
それからvueインスタンスを作り、routerとstoreを利用することを指定し、ルートコンポーネントApp.vueをレンダーリングし、それをDOMにマウントします("#app")

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

index.htmlファイル内を覗くと、IDがのdivがあることがわかります。"app"つまり、これAppがマウントされる場所です。

 <div id="app"></div>
    <!-- built files will be auto injected -->