템플릿 구조와 컴포넌트

기본 템플릿 구조

• 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/만 서비스하면 된다