vue.js 두번째
vue 를 설치하고 프로젝트 만들기
이번에는 조금 다른 방법으로 만들어볼 것이다.
직접 설정을 조작하고 그것을 저장해보자.
vue create "ProjectName" 을 한 후
직접 설정을 만들어보자
그 이후 만들어진 기본 테블릿을 한번 이해해보자
우선 우리가 npm run serve 를 실행하게 된다면
1) main.js 가 실행된다.
2) 그 안에 여러가지 우리가 쓸 폴더안에 쓸 것들을 선언한 후
3) createApp 함수를 실행시켜 app 을 띄우는 것이다. 이때 .use를 통해 .js 파일들을 연결? 시켜준다.
4) 이때 index.html 에 id="app" 이 있는 것을 볼 수 있는데 위 단계에서 .mount(#app) 은 id 를 사용할 때 쓴다.
이제까지의 과정은 다음과 같다.
main.js 실행 > 모듈 import > createApp > .use 함수들(router) > index.html 의 id 자리에 내용들 집어넣기
router 에 관한 추가 내용이다.
5) 마찬가지로 main.js 에서 실행, import 를 한 후 App.vue 의 내용을 잘 처리해서 index.html 에 집어넣는데
이때 App.vue 의 상단에 있는 코드에 대한 설명이다.
path 처럼 Home 을 클릭했을 때는 "/" 의 위치로, About 을 클릭했을 때는 "/about" 의 위치로 가게 된다. 그것을 router 에서 받아 views 폴더에 저장되어 있는 화면들을 선택해준다.
각각 화면마다 띄우는 화면은 views 폴더에 저장되어 있다
이제까지 과정은 다음과 같다.
main.js 실행 > index.html 에 내용을 App.vue 에서 넣어야함 > App.vue 에는 router-link 가 있고 그것에 따라 router 가 Views 폴더에 있는 화면들을 선택해서 띄어줌
> 이때 views 폴더에 있는 HomeView.vue 파일은 또 components 폴더에 있는 HelloWorld.vue 파일을 참조/변경함
index.html 에 id='app' 부분에 정보를 넣어야함 << 그 정보는 App.vue에 있음 << router-view 에 정보를 삽입해야함 (router-link 를 사용해서) << router 가 link 를 받아 views 폴더에 화면들을 선택해서 넣어줌
기본으로 만들어진 템플릿이 상당히 복잡하다.
.html 파일을 띄우는데 그 정보는 .vue 파일에 있고 또 .vue 파일끼리 서로 정보를 주고 받고 이 모든 과정은 .js 파일을 실행하며 만들어진다.
좀 많이 혼란스럽지만 나중을 위해 정리해둔다.
여기서 중요한점은 왜 이런 복잡한 방법을 사용하냐는 것이다.
그것은 바로 더 빠르고 쉽게 페이지를 만들고, 사용할 수 있도록 하기 위해서이다.
우리가 어떤 것을 클릭할 때마다 동적으로 페이지가 바뀌는데 이때 페이지 전체를 다시 로딩하는 것이 아니라
필요한 부분만 바뀌도록 만들어 앱을 사용하는 것처럼 빠르게 전환이 되도록 도움을 주는 것이 vue 이다.
즉 body 의 내용을 클릭때마다 바꾸고 싶음 > body 에 App.vue 내용이 들어감 > App.vue 에서 router-link 에 따라 내용을 달라지도록 함 > index.js 를 통해 AboutView.vue, HomeView.vue 내용으로 샥샥 바뀜
간단하게 축약하자면 index.html 의 한 부분만 샥샥 바뀌어서 빠르게 동작하는 것이다.