제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만,
제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.
혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!
Vue.js 개발하는 도중, 웹 어플리케이션 개발시 가장 기본적인 기능 중 하나인 '라우팅 기능'을 이용하고 싶더라구요.
뷰에서 라우팅 기능은 '뷰 라우터'로 공식적으로 지원하는 라이브러리로 npm에서 설치할 수 있도록 지원하고 있어 npm 명령어를 통해 설치 및 연동하였습니다.
뷰 라우터 (Vue Router)
뷰 라우터란 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다.
뷰 라우터는 총 3가지로 구분할 수 있으며, 자세한 사항은 각각 아래의 링크를 참조해주세요.
- 기본 라우터: https://logs-jejustone.tistory.com/19
- 네스티드 라우터: https://logs-jejustone.tistory.com/20
- 네임드 뷰: https://logs-jejustone.tistory.com/21
뷰 라우터(Vue Router) 설치
VSCode에서 Vue Router를 설치하는 과정입니다.
1. 설치한 VSCode에서 터미널(Terminal) 창을 엽니다.
- 방법:
- 키보드: Ctrl + Shift + `
- 마우스: VSCode 상단의 Terminal 클릭 > New Terminal 클릭
2. Vue Router 설치 명령어를 터미널에 입력하고 엔터를 클릭합니다.
- 명령어: npm i vue-router@next
3. 설치가 완료되었는지 터미널에 표시된 메시지를 통해 확인합니다.
정상적으로 설치가 진행되었다면, 가장 아래에 "found 0 vulerabilities"라고 표시됩니다.
뷰 라우터(Vue Router) 연동 및 테스트
뷰 라우터 중에서 가장 기본적인 뷰 기본 라우터를 사용하여 뷰 라우터가 정상적으로 연동되었는지 확인합니다.
해당 과정은 아래 링크를 참조하여 진행해주세요.
https://logs-jejustone.tistory.com/19
References
- Vue.js 개발환경 구축하기: https://logs-jejustone.tistory.com/2
[Vue] VSCode로 Vue.js 개발 환경 구축하기
제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. Vue.js 개발하기 전, 개발 환경을 구축하는 작업을 먼저
logs-jejustone.tistory.com
'Programming > Vue' 카테고리의 다른 글
뷰(Vue) 프로젝트 기본 파일(main.js / index.html / App.vue) 구조 및 동작 흐름도 (Workflow) (0) | 2022.12.08 |
---|---|
뷰 라우터(Vue Router) 설치 후, "1(#) critical severity vulnerability" 오류 해결 방법 (0) | 2022.12.07 |
뷰 상태 (Vue State) (0) | 2022.12.05 |
뷰 이벤트 (Vue Event) (0) | 2022.12.02 |
뷰 디렉티브 (Vue Directive) (0) | 2022.12.01 |
댓글