Vue 3 개발 환경 설정

Node.js 설치

먼저 Node.js를 설치해야 합니다. Node.js는 Vue 개발에 필요한 JavaScript 런타임 환경을 제공합니다.

Node.js 설치 확인

# 터미널에서 Node.js 설치 확인
node -v   
npm -v 

전역 패키지 저장 경로 설정

Node.js 설치 경로에 node_global과 node_cache 폴더를 생성합니다.

# npm 전역 패키지 저장 경로 설정
npm config set prefix "C:\dev\nodejs\node_global"
# npm 캐시 경로 설정
npm config set cache "C:\dev\nodejs\node_cache"

# 설정 확인
npm config get prefix
npm config get cache
npm list -global

환경 변수 설정

1. 사용자 변수의 Path에서 기존 경로를 C:\Users\사용자명\AppData\Roaming\npm에서 C:\dev\nodejs\node_global로 변경합니다.
2. 시스템 변수에 새 변수를 추가합니다:
   • 변수명: NODE_PATH
   • 변수값: C:\dev\nodejs\node_global\node_modules
3. 시스템 변수의 Path에 다음 경로를 추가합니다:
   • %NODE_PATH%
   • C:\dev\nodejs\

패키지 다운로드 속도 향상

국내 미러 소스를 사용하여 다운로드 속도를 향상시킬 수 있습니다.

# 네이버 미러 소스 설정
npm config set registry https://registry.npm.navercorp.com

# 미러 소스 확인
npm config get registry

# cnpm 설치 (대안)
npm install -g cnpm --registry=https://registry.npm.taobao.com

Vue CLI 설치

Vue 프로젝트를 생성하기 위한 CLI 도구를 설치합니다.

# Vue CLI 설치
npm install @vue/cli -g

# 설치 확인
vue --version

# Vue CLI 제거
npm uninstall @vue/cli -g

Vue 프로젝트 생성

방법 1: 공식 권장 방식 (Vite 기반)

Vue 3에서는 Vite를 기반으로 프로젝트를 생성하는 것이 권장됩니다.

# npm 사용
npm create vue@latest

# yarn 사용
yarn create vue

방법 2: 전통적인 방식

Vue CLI를 사용하여 Vue 2 또는 Vue 3 프로젝트를 생성합니다.

# 기본 프로젝트 생성
vue create 프로젝트이름

# 패키지 관리자 지정
vue create --package-manager yarn 프로젝트이름
vue create --package-manager npm 프로젝트이름

Yarn 1 설치 및 설정

Yarn은 npm 대신 사용할 수 있는 패키지 관리자입니다.

# Yarn 1 전역 설치
npm install -g yarn

# Yarn 버전 확인
yarn --version

# Yarn 설정
yarn config set global-folder "C:\dev\Yarn\yarn_global"
yarn config set prefix "C:\dev\Yarn\yarn_global\bin"
yarn config set cache-folder "C:\dev\Yarn\yarn_cache"

# Yarn 미러 소스 설정
yarn config set registry https://registry.npm.taobao.org

# 환경 변수 설정 (Path에 C:\dev\Yarn\yarn_global\bin 추가)

# 패키지 설치/제거
yarn add axios
yarn remove axios

npm에서 Yarn 1으로 전환

1. Yarn 1을 전역으로 설치합니다.
2. 기존 프로젝트의 node_modules 폴더를 삭제합니다.
3. package-lock.json 파일을 삭제합니다.
4. 터미널에서 yarn install을 실행합니다.

Yarn 1에서 npm으로 전환

1. 기존 프로젝트의 node_modules 폴더를 삭제합니다.
2. yarn.lock 파일을 삭제합니다.
3. 터미널에서 npm install을 실행합니다.