[Vue.js] About Vue (2)

프로젝트 구조 먼저 살펴보도록 해야겠다.. 1편에서 문법 정리하다가 갑자기 딴 길로 샘..

폴더 구조

node_modules : package.json에 종속되어있는 라이브러리들
public : webpack의 처리를 받지않고 퍼블리싱되는 정적 자산을 포함하는 폴더 (static assets)
src : 애플리케이션 디렉토리
src\assets : css나 img 등의 정적 자산을 저장하는 폴더, webpack의 처리를 받을 수 있어 css-pre processor 사용 가능
src\components : 컴포넌트를 담는 폴더
src\router : Vue Router 관련 폴더
src\store : Vuex 관련 폴더
src\views : 라우터 페이지가 관련 폴더
src\App.vue : 프로젝트 최상위 컴포넌트 파일
src\main.ts : 프로젝트의 entry ts 파일
src\shims-vue.d.ts : TypeScript가 vue파일의 component가 어떠한 인터페이스인지를 정의하여 import할 수 있게 한다.
.eslintrc.js : ESLint 설정 파일
.gitignore : git 규칙 설정 파일
babel.config.js
package.json
package-lock.json
tsconfig.json

App.vue, main.js, index.html

main.js

• npm run serve 명령어를 통해 뷰를 실행시켰을 때, 가장 먼저 실행되는 JS 파일
• Vue 인스턴스를 생성하는 핵심 역할
• vue로부터 createApp을 가져온다. 그리고 createApp 함수를 통해 App.vue 컴포넌트를 가지고 인스턴스를 만들어서 #app(id="app")에다가 해당 인스턴스를 mount한다.

index.html

• 위에서 나온 id='app'가 있는 곳이 바로 index.html이다

npm run serve 명령어로 뷰를 실행 ->
main.js 파일이 실행 ->
main.js 파일이 vue를 기반으로 createApp 함수를 실행 ->
이때 가장 먼저 가지고 오는 것이 통합 컴포넌트인 App.vue 파일.
이렇게 만들어진 인스턴스를 index.html의 id="app"에다가 mount 하게 된다.
App.vue 파일을 하나의 컴포넌트 파일이라고 하는데, App.vue의 경우 내부에 여러 컴포넌트들을 불러와서 main.js로 한 번에 넘겨주는 통합 컴포넌트라고 할 수 있다.

Component

• template, script, style 부분으로 나누어져 있다.
• template 부분에는 HTML로 화면상에 표시할 요소들 작성, script 부분에는 스크립트 코드 작성

router/index.js, /views

• App.vue의 template 부분에 router-view이 있다. 이 부분이 router/index.js와 연결되어 동작하는 부분

• router/index.js 파일에는 object 배열의 routes가 선언되어 있다.
• 각각의 router는 path, name, component 값을 가지고 있다. (name은 유니크한 값이여아함)