Vue.js 포스트 시리즈는 공식 문서를 따라가면서 작성되었습니다.
Vue.js 설치
Vue.js 3.X 버전을 사용합니다.
npm을 이용해서 Vue를 설치해보도록 하겠습니다. 시작하기전에 Node.js가 설치되어있지 않다면 Node.js 홈페이지에서 먼저 Node.js를 설치해주세요.
Node.js 설치 후 CMD에서 node -v를 입력해서 버전이 제대로 표시된다면 Node.js가 제대로 설치된 것 입니다. 참고로 이 포스트 시리즈에선 노드 v18을 사용할 예정입니다.
노드 설치가 완료되었다면, cmd 창에서 npm init vue@latest를 입력하여 뷰 프로젝트를 생성합니다.
npm init vue@latest입력하면 vue 최신 버전으로 install한다고 물어보는데 y를 입력해서 진행해줍니다. 그리고 여러가지 질문들이 나오는데 Project name은 default값 쓰셔도 되고 마음대로 하셔도 됩니다. 이 외의 나머지 질문들은 No(기본값이므로 엔터만 연타)로 입력하시면 됩니다.
설치 이후 관련 패키지들을 설치하기 위해서 해당 디렉터리로 이동한 뒤 npm install을 입력하여 패키지들을 설치해주시면 Vue 프로젝트를 시작하기 위한 기본적인 준비가 완료되었습니다.
CDN으로 이용하는 방식도 존재하긴 하는데 이 부분은 따로 소개하지 않으려고 합니다. CDN 방식은 공식 문서를 참조해주세요.
Vue 프로젝트 실행하기
작성한 프로젝트를 웹 페이지에서 보는 방법에 대해 알아보겠습니다. 우선 build를 해줍니다.
npm run buildbuild를 수행하고나면 프로젝트 디렉토리에 dist라는 폴더가 생성이 되었음을 확인할 수 있습니다.
dist는 distribution(배포)의 약자로, 배포와 관련된 파일들이 이곳에 모이게 됩니다. 실제 배포에선 이dist디렉토리 내부의 파일들이 배포가 되게 됩니다.
build를 거치고 dist 디렉토리가 생성되면 이제 웹에서 결과물을 확인할 수 있습니다. 다음 명령어를 통해 로컬 호스트를 실행하여 웹에서 결과를 확인해봅시다.
npm run preview
명령어가 실행되면 localhost로 실행된 위치를 알려주는데, 웹 브라우저를 열고 Local에 적혀있는 주소로 들어가면, 현재 실행된 Vue 프로젝트의 결과를 확인할 수 있습니다.
아직 아무런 내용도 적지 않았기 때문에 Vue의 프로젝트가 생성되었다는 기본 알림 화면이 나타나게 됩니다.
이렇게 Vue 프로젝트를 생성하고 실행해보는 과정을 마쳤습니다.
이번 포스트에선 Vue.js 프로젝트를 생성하는 방법에 대해 알아보았습니다. 다음 포스트부터 본격적으로 Vue.js를 사용하는 방법에 대해서 알아보도록 하겠습니다.
