Web Front-end/Vue.js
Vue.js 기본
ji.o.n.e
2020. 10. 26. 20:03
-
Vue.js는 웹프론트엔드 프레임워크
컴포넌트(Component)기반의 SPA(Single Page Application)을 구축할 수 있게 해주는 프레임워크 -
컴포넌트 (Component)
- 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소
- 재사용 가능하도록 구조화 한 것
-
SPA (Single Page Application)
- 단일 페이지 어플리케이션
- 하나의 페이지 안에서 필요한 영영 부분만 로딩 되는 형태
- 빠른 페이지 변환
- 적은 트랙픽 양
-
Vue CLI 설치
npm install -g @vue/cli
-
Vue 프로젝트 생성
vue create test
-
프로젝트 실행
npm run serve
-
vue router 설치
-
vue에서 라우팅 기능을 구현할 수 있도록 지원해주는 공식 라이브러리
npm install vue-router --save
-
-
라우팅
- 웹페이지 간에 이동하는 방법
- spa 미리 해당하는 컴포넌트 파일을 다 받아놓고 라우팅을 이용해서 필요한 부분만 화면 갱신
-
vue bootstrap 설치
npm install vue bootstrap-vue bootstrap
bootstrap, bootstrapVue 모듈 형태로 쓸 수 있는 상태가 됨