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이 다 있었는데 해당 부분이 각각 분리되어서 사용된다고 생각하면 된다.
728x90
'Programming > Vue.js' 카테고리의 다른 글
[VUE] 프로젝트 생성 후 <router-view> 에러 나는 현상 (0) | 2021.12.29 |
---|---|
[VUE] VUE 설치 과정에서 에러 발생 시 재설치 (0) | 2021.12.28 |
[VUE] ui 개발을 위한 Vuetify plugin 설치 (0) | 2021.12.28 |
[VUE] CLI V3 프로젝트 개발 시 유용한 vscode 확장프로그램 목록 (0) | 2021.12.28 |
[VUE] cli 3프로젝트 8080 포트 변경 (0) | 2021.12.28 |