[Vue] Vue 구조 파악해보기
Vue 설치
npm install -g vue
npm install -g @vue/cli
-g global
cli 를 사용해서 환경 설정을 통일화.
Vue 프로젝트 생성
vue create 프로젝트명
Vue 프로젝트 실행
cd 프로젝트 내부 폴더로 이동
npm run serve
package.json
의존 모듈 관리
node_modules
적용된 모듈들을 볼 수 있다.
초기 설정 살펴보기
main.js
Vue를 실행하면 가장 먼저 main.js 가 실행된다.
App.vue에 index.html 에 있는 div id="app"을 마운트 시킨다.
전역 설정은 이곳에 추가한다.
App.vue
라우터가 포함되어있다.
전역으로 사용되는 template, style을 이곳에서 관리한다.
#app은 최상위 div가 된다.
ROUTER
SPA는 라우터를 통해 single page로 하위 부분만 교체하므로, 사용자 경험을 향상시킨다.
<router-view/> 부분이 교체된다.
router/index.js 에서 라우터 설정을 해줄 수 있다.
path경로와 view.vue 를 매핑
import를 상단에 할 경우, 바로 loading,
component에서 import할 경우, 해당 path에 접근해야 import되는 lazy loading 방식으로 동작한다.
VIEWS
UI
화면에 보일 라우터에 의해 교체되는 template
사용할 components를 지정해서 사용한다.
해당 view에서만 사용되는 script를 직접 작성할 수도 있다.
Components
UI + 재사용할 기능
화면에 보일 template + 재사용할 js + 재사용할 css
화면뿐만 아니라 js, css 를 여러 VIEW에서 사용할 수 있도록 component화한 것이다.