할머니의 콤퓨타 도전기
Vue.js 기본 본문
-
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 모듈 형태로 쓸 수 있는 상태가 됨
'Web Front-end > Vue.js' 카테고리의 다른 글
[Vue.js] 데이터 양방향 바인딩 (Data Two Way Binding - v-model) (0) | 2020.10.28 |
---|---|
[Vue.js] 이벤트 (Events) (0) | 2020.10.27 |
[Vue.js] 데이터 바인딩 (Data Binding) (0) | 2020.10.27 |
[Vue.js] 뷰 데이터 (data) 와 메소드 (methods) (0) | 2020.10.27 |
[Vue.js] 뷰 인스턴스(instance) 생성하기 (0) | 2020.10.27 |
Comments