[Vue.js] 개발 환경 구축 (node.js + vs code + vue cli)

node.js와 vs code 를 이용한 vue.js 개발 환경 구축

Vue.js와 Node.js 그리고 Visual Studio Code

---

Vue.js를 업무 외적으로도 활용해보고 싶어서 노트북에 환경 셋팅을 했다.

Intellij를 이용하고 싶었으나 vue.js를 쓰려면 IntelliJ Ultimate 버전을 사용해야 해서 VS Code를 쓰기로 결정!

이번에도 설치하는 김에 과정을 기록해보았다. 

(Windows 환경 기준)

---

# 진행순서

1. Visual Studio Code 다운 및 설치

2. Node.js 다운 및 설치

3. Vue CLI 설치

4. 프로젝트 생성

 

 

1. Visual Studio Code 다운 및 설치

1) VS Code 다운

https://code.visualstudio.com/ 

- Window 버전 Stable로 다운

- Stable 과 Insiders의 차이는 충분한 테스트를 통회 안정화된 버전 / 최신 버전 여부

- Insiders 는 최신 버전인 만큼 추가적인 기능이 더 있겠지만 버그 등이 있을 수 있기 때문에 나는 Stable로 선택

Visual Studio Code Download

2) VS Code 설치

사실 설치는 별 거 없다. 

- 다운받은 설치파일 실행

- 다음 클릭해서 쭉쭉 진행하면 끝!

2. Node.js 다운 및 설치

1) Node.js 다운

https://nodejs.org/ko/

- Window LTS 버전 다운

- vs code 와 마찬가지로 node.js의 LTS와 현재 버전의 차이는 충분한 테스트를 통회 안정화된 버전 / 최신 버전 여부

2) Node.js 설치

- 다운받은 설치파일 실행

- vs code 와 마찬가지로 쭉쭉 진행해서 설치

3) Node.js 설치 확인

Node.js 가 정상적으로 설치되었는지 확인해본다.

- 키보드의 Window 버튼 + R > cmd 입력

- 명령 프롬프트에 node -v 입력 후 엔터 > Node.js 설치가 정상적으로 되었다면 아래 이미지처럼 버전 정보가 나온다.

3) NPM설치 확인

① npm 설치 확인

 - Node.js 를 설치하면 NPM은 자동으로 설치 된다.

 - NPM은 간단히 말하면,

    node.js 기반 모듈(오픈소스)을 명령어를 이용하요 설치 할 수 있게 해주는 Node Package Manager 이다.

 - 명령 프롬프트에 npm -v 입력 후 엔터 > 정상적으로 설치되었다면 버전정보가 나오는데.. WARN 이 같이나오네?!

 ※ 이때, 혹시 npm 명령어가 안된다! 하는 경우에는 환경변수 설정이 제대로 안되었을 가능성이 매우 크다

     환경 변수 설정은 아래 참고

  - 내PC 우클릭 > 속성 > 고급 시스템 설정 > 환경변수

- 사용자변수 > 새로 만들기 > 변수 이름 > 변수 값 입력

 

 

② npm WARN 이슈 해결(이건 필수는 아님. 저 WARN이 보기 싫어서 진행 함)

 - cmd에서 해결하기가 조금 번거로워서 PowerShell 이용 

 - PowerShell은 Windows에서 검색하면 기본으로 있음 > 관리자로 실행

 - 아래와 같이 명령어 입력

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install --global --production npm-windows-upgrade

- 그리고 다시 아래 명령어를 입력

npm-windows-upgrade

- 버전 선택하라고 나오면 방향키로 선택 후 엔터

- 설치 후 다시 npm -v 를 입력하면 npm 버전 정보가 나오며 정상적으로 설치된 것을 확인 할 수 있다

3. Vue CLI 설치

다시 명령 프롬프트를 실행한다 (Windows + R)

물론 PowerShell 혹은 VS code의 Terminal 에서 진행해도 된다

1) Vue CLI 설치

npm install -g @vue/cli

Vue CLI 설치 화면

※ npm audit 은 패키지들이 가진 취약점을 체크해주는 로직이다.

취약점 정보가 보기싫다면 아래 명령어를 사용

npm install -g @vue/cli --no-audit

--no-audit 옵션 추가하여 Vue CLI를 설치한 화면

2) Vue CLI 설치 확인

아래 명령어 입력해서 버전이 정상적으로 나오는지 확인

vue --version

Vue CLI 설치 확인

4. 프로젝트 생성

1) 프로젝트 생성

① 명령 프롬프트에서 프로젝트를 생성할 폴더로 이동 후 vue project 설치 명령어 입력

vue create {생성할 프로젝트 이름}

② 설치할 Vue 버전 방향키로 선택 후 엔터

 - 생성할 vue 프로젝트 구성을 정하는 설정 (Vue 3로 선택했음)

 - Manually select features를 선택하면 사용할 기능들을 직접 선택가능함

③ 설치 완료

2) 생성된 프로젝트 확인 및 실행

① 1)에서 생성한 프로젝트 경로로 이동 후 프로젝트 실행 명령어 입력

npm run serve

② 생성한 프로젝트 실행됨

③ 브라우저에서 확인

 - http://localhost:8080에 접속해서 아래와 같은 화면이 나오면 성공!

확장 프로그램 설치랑 패키지 파일 관련해서도 조만간 정리해서 올려야겠다 :)