Vue 프로젝트 구조

1. 프로젝트 설정 파일
   1. packge.json
      1. 프로젝트에 대한 정보, 배포 및 개발에서 사용할 모듈 정보, 지원할 브라우저 설정 정보 등등
      2. dependecvies로 설정된 부분이 배포 안에서 사용될 모듈, devDependencies로 설정된 부분이 개발에서도 사용되는 모듈
   2. package-lock.json
      1. package.json에 사용되는 모듈들이 동작을 하기 위해서는 또 다른 모듈들을 필요로 하는데 해당 정보가 package-lock.json 파일에 나와 있다.
   3. node_modules
      1. 해당되는 모든 모듈들이 실제로 설치된 곳
2. src 하위 파일
   1. main.js
      1. npm run serve 명령어를 통해 뷰를 실행 시켰을 때, 가장 먼저 실행되는 자바스크립트 파일
      2.  
      3. import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' createApp(App).use(store).use(router).mount('#app')
      4. vue로부터 crateApp을 가져온다
      5. createApp 함수를 통해 App.vue 컴포넌트를 가지고 인스턴스를 만들어
      6. #app(id="app")에다가 해당 인스턴스를 mount 한다
   2. Index.html
      1. 위 main.js 파일에 id="app"가 있는 곳
   3. App.vue
      1. 컴포넌트 파일
      2. App.vue는 내부에 여러 컴포넌트들을 불러와서 main.js로 한번에 넘겨주는
         통합 컴포넌트
3. 컴포넌트 파일
   1. 종류
      1. /views 디렉토리 하위 컴포넌트 파일
         1. 화면 전체에 해당하는 컴포넌트를 관리
      2. /components 하위 컴포넌트 파일
         1. 부분으로 구성된 재사용할 수 있는 컴포넌트
4. router/index.js
   1. App.vue에 <router-view>부분과 연결되어 동작하는 부분
   2. router/index.js
      1. Object 배열의 routes가 선언되어 있다.
      2. 각각의 router는 path, name, components 값을 가지고 있는데, name은 유니크 값을 가져야 하며,
         component라는 키는 path로 접근했을 때, 연결할 실제 컴포넌트 파일 이름을 나타낸다.