(Vue) Vue 개발환경 세팅

VSCode 설치

https://code.visualstudio.com/docs/?dv=win 

Documentation for Visual Studio Code

 

VSCode 의 Extension  설치

Vetur 플러그인은 Vue.js를 개발하는 데 도움을 주는 유용한 플러그인 중 하나다.
Linting, Syntax-highlighting, Formatting 등을 지원해준다.
Vue.js와 타입스크립트를 함께 사용하여 애플리케이션을 개발할 때도 적합한 기능을 제공하기 때문에 유용하게 사용할 수 있는 플러그인이다.

 

Vue Peek 플러그인은 코드상에 작성되어 있는 Vue 컴포넌트를 통해 해당 컴포넌트 파일을 열고 그 파일로 이동할 수 있는 기능을 제공하는 플러그인이다.

 

Vue 컴포넌트를 작성하다 보면 수기로 작성해줘야 할 것들이 매우 많다. 이러한 부분을 VSCode의 플러그인에서 자동완성을 제공해준다. 해당 플러그인을 설치한 후 플러그인 내에서 제공하는 API를 살펴보면 유용한 것들이 많다.\

 

Nodejs 설치

$ npm install nodeenv

 

NVM 설치

가상환경으로 나누어 Nodejs 버전관리를 한다.

 

1. NVM 다운로드 https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

 

2. 최신 릴리스의 nvm-setup.zip 파일을 다운로드합니다.
3. 다운로드한 zip 파일을 연 다음, nvm-setup.exe 파일을 엽니다.

4. 설치가 완료되면 CMD을 열고 windows-nvm을 사용하여 현재 설치된 노드 버전을 나열합니다
5. nvm install latest를 사용하여 Node.js 최신 릴리스를 설치합니다
6. nvm list available을 사용하여 현재 LTS 버전 번호를 확인합니다.

 

7. nvm install <version>을 사용하여(<version>을 버전 번호로 변경) LTS 버전을 설치합니다(예: nvm install 12.14.0).
8. nvm ls
9. 필요한 Node.js 버전 번호가 설치되면 nvm use <version>을 입력하여 사용할 버전을 선택합니다(<version>을 숫자로 바꿈, 즉, nvm use 12.9.0).
10. 프로젝트에 사용할 Node.js 버전을 변경하려면 새 프로젝트 디렉터리 mkdir NodeTest를 만들고 cd NodeTest 디렉터리로 들어간 다음, nvm use <version>을 입력하고 <version>을 사용하려는 버전 번호로 바꿉니다(예: v10.16.3`).
11. npm --version을 사용하여 설치된 npm 버전을 확인합니다. 이 버전 번호는 현재 Node.js 버전과 연결된 npm 버전으로 자동 변경됩니다.