[Vue] Vue.js 게시판 만들기 1 - Frontend 프로젝트 생성

요즘 Frontend에서 핫한 React와 Vue.js 중 Vue.js로 게시판을 만들어봅시다.
Front와 Back은 별도의 프로젝트로 구분하여 작업을 진행합니다.

Node, Npm, Vue Cli 설치

자기의 OS에 맞게 Node.js을 설치하고 버전을 확인합니다.

node -v

npm의 버전도 같이 확인합니다.

npm -v

이어서 Vue Cli를 설치합니다.

npm install -g @vue/cli

설치가 완료되었다면 버전을 확인합니다.

vue --version

22년 2월 21일 기준으로 node 16.13.2, npm 8.4.1, vue/cli 5.0.1 버전으로 시작합니다.

Frontend 프로젝트 생성

개발환경 설치가 완료되었다면 아래 명령어로 vue 프로젝트를 생성합니다. (vue-frontboard는 프로젝트 이름입니다.)

vue create vue-frontboard

Vue Cli 선택창이 나타나면 Vue 3 버전이 선택되어 있는지 확인하고 엔터를 눌러 생성합니다.

생성이 완료되었다면 프로젝트로 이동하여 서버를 실행시킵니다.

cd vue-frontboard
npm run serve

프로젝트가 이상없이 시작되었다면 Local 혹은 Network에 나타난 주소를 통해 페이지에 접속합니다.

Vue 기본 프로젝트 생성에 성공하였습니다.