👏 Vue 시작하기 !

✨ 시작하기 앞서 !

 오랫동안 멈춰있던 포스팅을 시작하기 위해 Vue 입문을 위한 간단한 포스팅을 시작할 예정입니다.

작성된 Vue 입문의 글들은 React와 비교하며 작성될 예정입니다 !

또한 Node.js, npm과 yarn이 설치되어있다는 전제로 진행합니다.

💾 설치 및 프로젝트 생성하기

 React와 Vue 모두 CLI 기반의 설치를 지원합니다.

React의 경우 손쉽게 시작할 수 있게 해주는 React의 CRA를 설치합니다.

npm install -g creat-react-app
# OR
yarn global add creat-react-app

# 제대로 설치되어있는지 확인
create-react-app --version

제대로 설치가 되었다면 버전이 뜨게됩니다.

이후 프로젝트 생성을 위한 CRA 명령어를 실행합니다.

yarn create react-app 프로젝트명

Vue 또한 프로젝트 빌드를 위한 CLI를 우선 설치합니다.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

# 제대로 설치되어있는지 확인
vue --version

제대로 설치가 되었다면 버전이 뜨게됩니다.

이후 프로젝트 생성을 위한 CLI 명령어를 실행합니다.

vue create 프로젝트명

Vue는 아래와 같이 방향키로 버전을 고르게 됩니다.

현재 예제는 Vue3로 생성하였습니다.

만약 위의 화면에서 방향키로 움직이지 않는다면 아래의 명령어로 실행해야 합니다.

winpty vue.cmd create 프로젝트명

👀 프로젝트 실행하기

 React의 프로젝트를 열어보면 아래와 같이 기본으로 구성되어 있습니다.

React CRA의 기본 구조

확인을 위한 프로젝트 실행 명령어를 입력합니다.

yarn start

정상적으로 실행된다면 명령어 이후 자동적으로 아래와 같은 웹페이지가 열리게 됩니다.

사진과 같은 페이지가 뜬다면 성공 !

이번엔 Vue의 프로젝트를 열어보겠습니다.

구성은 React와 비슷합니다.

Vue의 프로젝트 실행 명령어는 아래와 같습니다.

yarn serve

Vue는 React처럼 웹페이지가 자동적으로 열리지는 않고 결과를 확인하여 해당 localhost로 접속하여야 합니다.

Ctrl + click으로 바로 접속 가능합니다.

위와 같은 Vue의 초기 실행화면이 보인다면 성공 !

프로젝트 구조의 내부는 큰 차이는 없습니다.

React에 비해 Vue는 assets, components파일이 추가되어있습니다.

이렇게 Vue, React 모두 손쉽게 프로젝트 빌드를 위해 CLI의 형태로 제공되고 있습니다.

이후 간단한 TODO 예제로 이어가겠습니다.

2021.12.20 - [Vue] - 📒 TODO ! - 형태 알아가기