[ MAC Vue 설치방법 ] 뷰 설치방법에 대해 알아보자

Vue.js를 설치하는 방법은 다음과 같습니다

1. Node.js설치
  Vue.js를 사용하기 위해서는 먼저 Node.js가 설치되어 있어야 합니다. Node.js는 Vue 개발 환경에서 필요한 패키지 및 도구를 관리하는 데 사용합니다 Node.js의 공식 웹사이트 (Node.js (nodejs.org))에서 다운받을수 있습니다.

2.Node.js 설치확인
  Node 다운로드는 최신 버전보다 LTS 버전을 사용하는 것이 좋습니다. 이유는 안전성과 신뢰성, 보안 업데이트, 호환성, 커뮤니티 지원 등의 이유가 있습니다. 그리고 버전이 많이 낮은 12번대의 Node.js를 사용할 시 es6의 신 문법등의 제약이 걸리게 됩니다. 
Node.js 가 설치 됐다면 터미널에 명령어를 입력합니다.   

node -v

위와 같이 버전이 나온다면 Node.js 설치 성공입니다

3.Vue CLI 설치 
  Vue 개발을 위해 CLI(Command Line Interface)를 설치해야 합니다. Vue CLI 는 Vue 프로젝트를 생성하고 관리하는 데 사용되는 도구입니다. 다음 명령어를 사용하여 Vue CLI를 전역으로 설치합니다. 아래와 같은 명령어를 입력해 보세요

npm install -g @vue/cli

위와 같은 명령어를 사용하게 되면 설치가 진행됩니다. 

하지만 일부 아래와 같은 오류를 만날 수 있습니다.

위와 같은 오류를 접하게 되신다면 명령어를 수정하여 재입력합니다.

sudo npm install -g @vue/cli

위의 명령어를 입력하게 되면 아래와 같이 비밀번호를 입력하라고 나옵니다 비밀번호는 현재 사용하시는 pc의 로그인된 계정의 비밀번호를 입력하시면 됩니다 



명령어를 입력하게 되면 아래와 같은 설치 로그가 보이게 됩니다.

설치가 완료된 후 아래의 명령어를 입력합니다.

vue -V

설치가 정상적으로 됐다면 아래와 같은 정보가 출력됩니다.

이제 Vue를 설치할 준비가 거의 끝났습니다!


4. Vue 프로젝트생성
  Vue CLI가 설치되면 Vue 프로젝트를 생성할 수 있습니다. 원하는 디렉터리로 이동한 후 다음 명령어를 실행하여 Vue 프로젝트를 생성합니다

 

아래의 명령어를 입력합니다. 

vue create [프로젝트이름]

ex) 
vue create vue-study

 

아래의 명령어를 입력하게 된다면 아래처럼 출력됩니다.

맘에 드는 버전을 선택합니다.

vue2와 vue3의 주요 차이점은 다음과 같습니다

1. 문법과 API: Vue 3는 Vue 2와 비교하여 몇 가지 문법과 API에서 변경이 있습니다. Vue 3에서는 Composition API라는 새로운 기능이 도입되었으며, 코드의 구성성과 재사용성을 향상시킵니다. Vue 2에서는 Options API를 사용하였으며, Vue 3의 Composition API와는 문법과 사용 방식이 다릅니다. Vue 3는 보다 선언적이고 유연한 방식의 개발을 지원합니다.
   
   
2. 번들 크기: Vue 3은 Vue 2에 비해 번들 크기가 더 작습니다. Vue 3는 효율적인 코드 분할과 Tree-shaking을 통해 필요한 부분만 번들에 포함되도록 최적화되었습니다. 이는 애플리케이션의 초기 로딩 속도와 성능에 긍정적인 영향을 줄 수 있습니다.
   
   
3. 성능: Vue 3는 내부적으로 가상 DOM(Virtual DOM)을 개선하여 더 빠른 렌더링 속도와 효율적인 메모리 관리를 제공합니다. 또한, 반응성(Reactivity) 시스템의 변경으로 인해 Vue 3의 반응성 성능이 향상되었습니다.
   
   
4. 에코시스템: Vue 2는 오랫동안 개발되어 왔기 때문에 더 큰 에코시스템과 풍부한 커뮤니티 지원을 가지고 있습니다. Vue 2용 플러그인, 컴포넌트, 라이브러리 등이 다양하게 제공되고 있습니다. 반면에 Vue 3는 아직 상대적으로 더 작은 에코시스템을 가지고 있지만, 점차 성장하고 있습니다.

이러한 차이점을 고려하여, 프로젝트의 요구사항과 개발 환경에 따라 "Default (Vue 3)" 또는 "Vue 2" 중 어떤 버전을 선택할지 결정할 수 있습니다. Vue 3는 더 최신의 기능과 성능 개선을 제공하지만, Vue 2는 더 큰 커뮤니티와 호환성을 고려한 선택이 될 수 있습니다.

저는 Vue3로 진행하겠습니다.

Vue3로 선택해서 엔터를 누르게 되면 아래와 같은걸 또 선택하라 합니다. 

우리는 npm을 사용할 거 기 때문에 npm으로 선택 후 엔터를 입력합니다.
엔터를 누르게 되면 아래와 같이 설치 로그가 보입니다 

 

아래는 설치가 완료된 모습입니다. 

 

 

5. 프로젝트 실행

  Vue 프로젝트 생성이 완료되면 생성된 디렉터리로 이동하여 다음 명령어로 개발 서버를 실행합니다.

cd vue-study
npm run serve

* vue 프로젝트가  설치된 경로로 이동하지 않으면 npm run serve 명령어를 이용할 수 없으니 주의해 주세요.


해당 디렉터리로 이동후 명령어를 입력하게 되면

위와 같은 화면이 보이실 겁니다!
화면이 정상적으로 보이셨다면 

브라우저 url 입력창에 http://localhost:8080/ 주소로 이동합니다.

 

 

위와 같은 화면이 출력되면 vue 설치 및 실행 완료입니다!