[Vue.js] 간단한 Vue 기본 상식 시리즈 -2 Vue 3 프로젝트 시작하기

 

 

 

Vue 3 프로젝트 시작하기

 

 

최근에 개발공부를 하면서 다시 조금씩 기초를 다져나가야겠다는 생각이 막 들어요.

 

그래서 현재 회사 프로젝트인 Vue 2 버전에서 Vue 3로 올려서 공부를 해야겠다는 마음이 들어서 Vue 3 프로젝트 시작하는 법 기록을 하렵니다!

 

 

 

---

 

 

 

iTerm2 또는 터미널에서 새로운 프로젝트를 위한 디렉터리 만들기

 

 

첫번째로 현재 내 로컬 컴퓨터에서 프로젝트에 대한 경로를 만들어주어야겠죠?

 

저는 맥을 사용하고 있기때문에, iTerm2를 사용해서 워크스페이스 폴더 안에 'wekor' 이라는 디렉터리를 만들어주는 명령어 mkdir 입력해주고,

 

생성된 디렉터리 안으로 이동합니다.

 

 

 

 

 

 

그리고 이제 Vue를 설치하기 위한 명령어들을 쭉 설명해볼께요.

 

 

 

 

아차, Vue 3 설치하기에 앞서 현재 제 개발환경에 문제가 하나 있었어요.

 

 

정확히 말하면 Node 버전의 문제인데요. 

 

이게 회사 버전에 맞추려고 Node 버전을 낮춰나서 일어나는 문제였어요.

 

이제 선택의 기로에 왔습니다.

 

고성능 개인 컴퓨터를 업무용으로 쓰고 있었는데,

 

그냥 회사 맥북을 써야하는걸까 아니면 설치 후 계속 노드를 올리고 내리고 하는 작업을 반복해야하는 걸까. 

 

근데 Vue3도 그렇고 Node 버전도 언젠가는 올려야하는 것이었기에 쿨하게 그냥 올리기로 하고 아래 명령어들을 쭉 입력해주었습니다.

 

 

 

 

 

 

n – Interactively Manage Your Node.js Versions

 

Node.js version management: no subshells, no profile setup, no convoluted API, just simple.

 

 

npm에서 n이라는 라이브러리를 설치해주는데, 소개글을 보면 Node.js 버전 매니지먼트라고 합니다.

 

이걸로 간단하게 노드 버전을 업데이트를 할 수 있는데요.

 

5291, 5292 행의 sudo n lts/sudo n latest라는 명령어로 Node 버전을 최신 버전으로 업데이트를 해주게 됩니다.

 

그리고 5293행의 node -v로 Node의 버전을 확인하는 것으로 노드 버전 컨트롤은 완료했습니다.

 

 

 

 

 

 

 

 

이렇게 설치해주면 위와 같은 에러가 나지 않습니다. 그럼 이제 Vue 3 프로젝트를 시작해봐야겠죠?

 

 

 

 

 

 

vue create 프로젝트 이름을 입력해주면, 자동으로 새로운 Vue 프로젝트를 설정하기 위한 옵션들이 나오게 됩니다.

 

 

 

 

 

 

위, 아래 화살표키로 Default가 될 바벨 웹팩과 eslint 버전을 선택할 수 있는데, 여기서 Vue 3를 선택하기 위해 엔터 입력

 

이제 거의 다왔습니다. 아래와 같은 메세지가 나오며 인스톨 완료! 이제 해당 프로젝트로 이동해서 로컬 호스트를 띄워보면 됩니다.👏🏻 

 

여기까지 오느라 수고하셨어요. 다음에는 라우터 설정에 대해서 알아보겠습니다.

 

 

 

 

 

 

---

 

 

 

참고문서

 

 

https://cli.vuejs.org/guide/creating-a-project.html

Creating a Project | Vue CLI