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"즉, 이것은 앱이 마운트되는 곳입니다.

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