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 -->
Author And Source
この問題について(Vue CLI ノート(2):プロジェクトの構成とロードの仕組み), 我々は、より多くの情報をここで見つけました https://qiita.com/joycho/items/05471c073d6c7c5e52a8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .