개발 도구 (Development Tools)/Vue

Vue 개발 환경 세팅하기

BiCute 2022. 8. 11. 08:00
반응형

 

#1 개발 환경 세팅

 

(1) 원하는곳에 작업용 폴더를 생성.

(2) VisualStudio Code로 해당 폴더를 열어줍니다.

(3) 터미널을 열어 아래 명령어를 입력합니다.

npm install -g @vue/cli

  *npm 명령을 사용하기 위해선 node.js가 설치가 되어있어야 합니다.

  node.js 다운로드 페이지 >

 

 

 

설치가 되는 척(?) 하면서 오류가 나는 경우가 많습니다.

  • 윈도우에서 흔히 발생하는 에러

'이 시스템에서 스크립트를 실행할 수 없으므로 c: 어쩌구 저쩌구...' 

(1) Windows PowerShell을 관리자 권한으로 실행합니다.

(2) 다음 실행 규칙을 변경하는 명령어를 입력합니다.

Set-ExecutionPolicy RemoteSigned

실행 정책을 변경하겠냐는 물음이 나오면 Y를 선택해 줍니다.

VSCode로 돌아와 다시 터미널에서 명령을 입력하면 끝.

 

 

  • 맥에서 흔히 발생하는 에러

맥에서 터미널로 이런저런것들 설치하다보면 매우 자주 위와 같이 접근 권한이 없다거나 하는 메시지가 자주 나올텐데, 

이럴때는  명령어 앞에 sudo(관리자 권한) 명령어를 사용하면 아래와 같이 비밀번호를 물어보면서 설치가 정상적으로 진행됩니다.

sudo npm install -g @vue/cli

 

※ 혹시 이미 설치가 되어있는지 몰라 확인하고 싶을때는 터미널에 다음 명령을 입력하면 됩니다.

설치되어있다면 해당 버전을 알려줍니다.

vue --version

 

 

(4) Vue 프로젝트 생성하기

  아래와 같이 터미널에 입력해주면 입력한 프로젝트 명으로 하위 폴더가 생성됩니다.

vue create 프로젝트명

설치 버전을 물어본다면 Vue 3를 선택합니다.

 

 

여기까지 진행하면 세팅 완료입니다.

마지막으로 현재 위치한 곳에서 새롭게 프로젝트 폴더가 생성되었기에

cd 프로젝트 명을 입력하거나 다시 vsCode에서 생성한 프로젝트 폴더를 새로 열어주셔야 정상적으로 동작합니다.

src 폴더 안에 있는 App.vue가 메인 폴더가 되며, 작성된 내용을 브라우저로 확인하고 싶을땐 터미널을 열고

npm run serve를 입력해주면 됩니다.

 

 

 

#2 확장 프로그램 설치

이제 Vue 작업을 도와줄 관련 확장 프로그램을 설치해줍시다.

 

(1) Vetur

.vue 파일의 코드에 하이라이팅 효과를 줍니다.

가독성이 매우 높아집니다.

 

 

(2) Vue 3 Snippets

스니펫이 다 그렇지만 반복되는 긴 코드들을 짧은 코드입력으로 자동 완성시켜줍니다.

 

 

(3) ESLint

자바스크립트 문법 검사기.

 

 

(4) Auto Colse Tag

기존 html문서에서 잘 작동하던 기능들이 vue로 확장자가 바뀌면 작동하지 않는 경우도 많습니다. (자동완성 같은것들)

닫는 태그가 자동으로 생성이 안된다면 매번 직접 작성하기 귀찮으니 이것도 설치해 줍니다.

 

 

 

※ VSCode에 확장 프로그램이 전혀 세팅이 되어 있지 않다면 아래 게시물도 함께 확인해 보는것을 추천드립니다.

비주얼 스튜디오 코드 확장 프로그램 추천 (12종) >

 

 

 

반응형