Vue - NodeJS와 NPM

nvm : 노드 버전 매니저

현재 사용하고 있는 노드 버전을 바꿔줄 수 있다.

 

설치 링크

https://github.com/nvm-sh/nvm

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

- 설치하기 전에 Nodejs가 설치되어있지 않아야한다. 설치되어있다면 지우고 시작해야한다.

- NodeJs는 nvm을 통해 설치한다.

 

1. 터미널로 설치

2. nvm windows 설치

- 일반적으로 windows는 그냥 nvm을 사용할 수 없다.

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

- 위 밑줄 친 파일을 다운로드 후 실행파일 실행

3. 완료

- 기본적인 nvm 명령어 사용가능

 

n 설치 방법 - Nodejs의 버전을 관리해줌(설치되어있어도됨)

- windows는 안됨!

https://www.npmjs.com/package/n

n

 

1. 깃허브 페이지 들어가서 설치방법 보기

https://github.com/tj/n

GitHub - tj/n: Node version management

 

2. n으로 nodeJS설치 방법

 

 

 

프로젝트 시작 시 npm 설정

1. npm init -y

- node pakage manager로 초기화 시킨다. (현재 프로젝트를 npm으로 관리하겠다!)

- -y는 설정을 위한 질문을 생략함

2. Vue 설치

npm install vue

3버전을 설치하려면-(현재는 자동으로 3버전이 설치됨)

npm install vue@3.2.9

3. nodes_modules 폴더에 vue랑 다른 폴더도 생기는데..?

- vue를 사용하기 위해 필요한 패키지들이 같이 설치된다.

- vue폴더의 pakage.json에 명시되어있다.

4. main이라는옵션이란?

- npm install로 설치할 수 있는 패키지들은 main이라는 옵션을 통해서 최초에 어디로 접근해서 패키지를 사용해야하는지 명시해야한다.

-  예를 들어  vue같이 누구에게 제공하는 패키지로 만들 때 main을 사용한다.

- 하지만 우리는 제공하는 패키지가 아니고 프로젝트니까 필요없는 옵션이다. - 있어도 없어도 상관없다.

 

 

npx

- 노드 패키지 실행 명령어이다.

- npm을 설치하면 같이 설치된다.

 

serve 패키지?

- 로컬 서버를 열어줌

 

npx serve

- 원래는 serve를 로컬환경에 설치해야하는데 설치과정을 생략하고 

단순히 메모리 상에서만 진행하고, 메모리에 설치한 serve를 그 자리에 설치와 함께 실행한다.

- 원래는 npm i serve로 설치해야된다.

 

만약 npm i serve로 설치했다면??

- pakage.json에서 scripts에 아래처럼 추가하고 npm run dev로 실행해주면 된다.

 

 

 

pakage-lock.json이란?

- 만약 pakage.json에서 설치된 패키지들의 버전이 ^(캐롯기호)로 인해 각각 다르게 되는 상황이 생길 수 있다.

- 그래서 필요한 것이 pakage-lock.json이 필요하다.

- 어떤 패키지를 설치했을 때의 환경에 맞게 해당 버전을 정확하게 갖고 있다.

- 예를 들어 vue를 설치하면 다른 패키지들도 설치되게 된다.

- 이 때 vue를 설치한 시점의 패키지들의 버전들을 스냅샷 찍어서 pakage-lock.json에 저장하는 것이다.

- 그러면 프로젝트를 실행하기 위해 패키지를 설치할 때 버전이 완벽히 일치할 수 있게 된다.

 

 

dependencies 

일반 의존성 패키지

의존하고 있는 패키지

devDependencies

개발 의존성 패키지

개발할 때만 필요한 패키지

 

.gitignore로 nodes_modules와 같은 폴더는 깃에 안올라가게 하기