node를 이용한 Vue 프로젝트 구조

vue 프로젝트 구조

• node_modules
  • node.js 환경의 여러 의존성 모듈
• public/index.html
  • vue 앱의 뼈대가 되는 파일
  • 실제 제공되는 단일 html 파일
• src/assets
  • webpack에 의해 빌드 된 정적 파일
• src/components
  • 하위 컴포넌트들이 위치
• src/App.vue
  • 최상위 컴포넌트
• src/main.js
  • webpack이 빌드를 시작할 때 가장 먼저 불러오는 entry point
  • 실제 단일 파일에서 DOM과 data를 연결했던 것과 동일한 작업이 이루어지는 곳
  • vue 전역에서 활용 할 모듈을 등록할 수 있는 파일
• babel.config.js
  • babel 관련 설정이 작성된 파일
• package.json
  • 프로젝트의 종속성 목록과 지원되는 브라우저에 대한 구성 옵션이 포함(requirement.txt와 같다 생각하면 됨)

pass props % emit event

• props는 아래로, event는 위로
• 부모는 자식에세 데이터를 전달(pass props)하며, 자식은 자신에게 일어난 일을 부모에게 알림(emit event)