Vue.js 개발환경 - VS code에 설정하기 [스마트인재개발원]

< [스마트인재개발원] 랩실에서 생활하는 Sophie의 개발환경 구축하기.. >

 

SPA(Single Page Application)의 떠오르는 강자!

Vue.js를 사용하기위한 개발환경을 설정하기 위해 VS code에 설치해봤습니다..

 

먼저, 구글 창에 Node.js를 검색하여 제일 먼저 뜨는 공식 홈페이지에 접속한다.

 

Node.js 홈페이지에 접속

체크표시 버전 설치!

사실 Node.js만 사용하려면 안정적인 버전인 왼쪽 버전을 써도 되지만, 나는 Vue.js를 쓰기 위해 오른쪽 버전을 다운로드하였다.

(처음에 왼쪽 버전을 받아서 사용하려고 했는데, npm자체가 자꾸 에러가 나서 지우고 다시 오른쪽으로 받았더니 오류가 없었다.)

이렇게 Node.js를 설치해 주고 난 다음에 Visual Studio Code에 접속해준다. (Visual Studio Code 없는 흑우들 없쥬..?)

 

Ctrl + ` 를 눌러 터미널에 접속!

VS code에 들어왔으면 터미널을 켠다.

다음과 같이 작업 파일 창 다음에 입력을 해준다. 여기서 npm warn이 안 뜨고 다운이 잘 받아진다면 성공!

다운로드하는 동시에 에디터 부가기능을 같이 설치해 보자.

VS code 제일 왼쪽 메뉴바를 보게 되면 Extensions 버튼이 있다.

이 버튼 클릭!

클릭했으면 Vetur, HTML CSS Support, Vue 3 Snippets를 순서대로 검색하여 install 해준다.

---

여기까지 잘 왔으면 이제 Vue 작업 폴더 (workspace)를 만들어 줄 차례이다.

먼저 바탕화면에 새폴더(작업용)를 하나 생성해주고 아래와 같이 오픈 폴더 해준다.

바탕화면에 만들었던 폴더가 잘 들어온 것을 확인해준다.

터미널을 열어서 작업폴더 하위에 vue 프로젝트를 하나 생성해준다.

 

*오류처리*
터미널에서 "vue create" 명령어 입력 시 아래와 같은 오류가 발생할 수 있다.

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\username\AppData\Local\Yarn\bin\vue.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + vue + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAcces

이는 윈도우 파워쉘에서 실행했을 때 발생하는 증상으로, 이 때는 "vue.cmd create"로 사용하면 된다.

 

엔터를 한번 더 치면 프로젝트 생성 완료!

성공!!!!

 

 

해당 수업은 '스마트인재개발원'에서 '지능형IoT 융합SW 전문가과정(NCS)과정'에서 진행한 교육내용입니다.

 

 

스마트인재개발원