BloCCat

1. main.js 에서 router와 App.vue 를 사용한다는 것을 인지 2.App.vue 에서 태그를 읽고 라우팅을함 * 화면에 보이는것은 App.vue 이며 Header 부분은 변하지않은 고정(메뉴바 등등) 화면을 뜻하며 밑에 태그 부분만 url에 따라 변하는것 3. 태그를 읽으면 router.js를 호출하여 읽음 routes: 부분에 선언된 path에 따라 App.vue 의 태그 부분이 바뀌는 것.

1. components / layout / Header.vue 생성 2.bootstrap 사용 npm install vue bootstrap-vue bootstrap 3.main.js 수정 import Vue from 'vue' import App from './App.vue' import router from './router' import { BootstrapVue, IconsPlugin } from 'bootstrap-vue' // Import Bootstrap an BootstrapVue CSS files (order is important) import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css..

1. vue cli 설치 npm install -g @vue/cli 2. project 구조 자동 설정 vue create 프로젝트명 -> default로 설치 3. vue-router 설치 npm install vue-router --save

Vue.js : 컴포넌트 기반 spa를 구축할 수 있게 해주는 프레임워크 컴포넌트 - 웹을 구성하는 로고, 메뉴바, 버튼 등 웹 페이지 내의 다양한 UI 요소 - 재사용 가능하도록 구조화 한 것. SPA - 단일 페이지 어플리케이션 - 하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태 - 빠른 페이지 변환 - 적은 트래픽 양 - 단점 : 초기 로딩 속도가 느림 (모든 파일을 한번에 가져오기 때문)