[VUE] VUE 프로젝트 구조

Npm을 이용한 Vue 설치후 프로젝트 구조 잡기

• npm을 이용하여 vue를 사용할때 3가지 파일로 나눠서 코딩한다.
• main.js는 Vue 인스턴스를 로딩하기 위해서 사용한다.
• .vue 파일들은 각각 vue에 대한 Component들이다.
• .html 파일은 컴포넌트가 삽입될 HTML 템플릿이다.

Vue 컴포넌트 파일 구조 이해하기

• .vue로 끝나는 파일은 컴포넌트를 만들기 위하여 사용되는 자바스크립트 코드이다.
• .vue파일은 크게 3가지 부분으로 나눠진다. 
  
  • template : 템플릿은 해당 Component를 구성하는 실제 컴포넌트에 대한 HTML 코드를 작성하는 부분이다.
  • script : 실제 해당 컴포넌트에 대한 data와 실제 동작을 정의하는 JS 파일이다.
  • style : template에 대한 element의 스타일을 지정할 때 사용한다.
• CDN으로 사용할때는 Vue.component 함수 하나에 위의 template, script, style이 다 있었는데 해당 부분이 각각 분리되어서 사용된다고 생각하면 된다.