제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만,
제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다.
혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요!
본 게시글에서는 관리자/직원 전용 웹 어플리케이션을 구현하기에 앞서 프론트엔드(Front-end) 환경을 구축하는 과정을 기록합니다.
프론트엔드(Front-end) 환경 구축하기
스펙
- Framework: Vue 2
- Plugin: router | vuetify
- Tool: VSCode (Visual Studio Code)
구축 과정
1. 'VSCode로 뷰(Vue.js) 개발 환경 구축하기'를 참조하여 아래 사항에 대해서 모두 설치합니다.
[ 설치 목록 ]
- VSCode (Visual Studio Code)
- [Optional] VSCode Extension
- Node.js
- Vue-Cli
- Chrome
- Chrome Vue.js Devtools
- Git
2. 'VSCode로 뷰(Vue.js) 프로젝트 생성 및 구동하기'를 참조하여 VSCode에서 Frontend 프로젝트인 Vue.js 프로젝트를 생성합니다.
[ 주의 사항 ]
작성월(2022/12) 기준, Vue Plugin 중 하나인 Vuetify를 안정성있게 사용하려면 Vue 2를 사용해야합니다.
저는 Vuetify도 함께 공부하고자 Vue 2를 기반으로 설치하였습니다.
3. VSCode에서 새로 생성한 Frontend 프로젝트를 최상위 폴더로 다시 열어줍니다.
- 방법: 상단 메뉴의 'File' → 'Open Folder' → 방금 생성한 프로젝트 폴더 클릭
4. Vue Plugin 중 하나인 Vue Router를 터미널에서 아래 명령어를 실행하여 추가합니다.
- 터미널 오픈 단축키: Ctrl + Shift + `
- 명령어: vue add router
- 주의 사항:
- yes/no 선택하라는 것이 뜨는 경우, yes를 선택합니다.
- 버전 선택하라는 알림창이 뜨는 경우, 일전에 선택한 Vue (2 or 3)을 선택합니다.
5. Vue Plugin 중 하나인 Vuetify를 터미널에서 아래 명령어를 실행하여 추가합니다.
- 터미널 오픈 단축키: Ctrl + Shift + `
- 명령어: vue add vuetify
- 주의 사항: 버전 선택하라는 알림창이 뜨는 경우, 일전에 선택한 Vue (2 or 3)을 선택합니다.
6. 프로젝트를 구동하여 정상적으로 구축이 되었는지 확인합니다.
- 터미널 오픈 단축키: Ctrl + Shift + `
- 명령어: npm run serve
- 방법:
- 터미널에서 명령어가 정상 실행된 것을 확인
- Chrome에서 'http://localhost:8080/' 접속
- 2번과 다르게 아래와 같이 파란색 계열의 Vuetify 예시 창이 표시되는지 확인
댓글