템플릿 구조와 컴포넌트

템플릿 구조와 컴포넌트


기본 템플릿 구조

  • node_modules/
  • public/
    • index.html → 브라우저에 보여지는 페이지
  • src/
    • assets/
    • components/
      • HelloWorld.vue → vue 컴포넌트
    • views/
    • App.vue → 최상위 vue 컴포넌트
    • main.js → 메인. vue 인스턴스 생성, 각종 모듈 임포트
    • router.js → 앱 라우터 설정
    • store.js → vuex. 상태 관리 모듈 설정
  • package.json → npm 설정

파일 연결 구조


bundle

번들링

  • 프로젝트의 자원을 모아 덩어리(bundle)로 만든다

빌드

  • npm run build
  • 에셋(이미지, js, css) → bundling → /dist/
  • 호스팅 서버에서는 /dist/만 서비스하면 된다

강의에 등록된 질문이 없습니다. 궁금한 부분이 있으면 주저하지 말고 무엇이든 물어보세요.