어떤 웹 서비스든지 화면이 존재하며 우리는 그것을 Front-end라고 부릅니다. 오늘은 Front-end 프레임워크 중 하나인 Vue.js로 화면을 구성하는 방법을 알아보고자 합니다.
Vue란? JavaScript 프레임워크로 이번 포스팅에서는 Vue 3를 다루겠습니다. Vue 컴포넌트는 옵션(Options) API와 컴포지션(Composition) API 두 가지 스타일로 작성할 수 있는데 옵션 스타일은 익숙하므로 Vue 3부터 나타난 컴포지션 방식으로 작성해보도록 하겠습니다.
Node.js 설치 https://nodejs.org/en/download/ 설치 후 커맨드창을 열고 npm -v 로 설치를 확인합니다.
Vue 설치 npm init vue@latest
플러그인 설치 vue 패키지 설치
저는 위에서 ESLint, Prettier, Router는 활성화(Yes) 했습니다.
프로젝트 생성 및 실행 cd <your-project-name> npm install npm run dev vue 프로젝트 실행 결과
이제 위 http://localhost:5173/ 로 접속하면 아래와 같은 기본 화면이 나옵니다. vue 기본 화면
프로젝트 구조 프로젝트가 어떻게 생겼는지 구조를 한번 살펴보겠습니다.
기초 공사가 완료되었습니다. 이제 우리는 아래 파일들을 수정 및 확장하여 웹 서비스 개발을 해보도록 하겠습니다. 화면 뼈대 : views 화면 구성 : components 화면 요청 처리 : router 기본 구성 : App.vue, main.js
