본문 바로가기

Vue.js

[Vue.js] Vue3 CLI를 설치해보자.

반응형
SMALL

 

 

 

1. node.js 설치

vue3 cli를 설치하려면 먼저 최신 버전의 node.js가 설치되어 있어야 합니다.

 

https://nodejs.org/en/download/

 

해당 링크에서 운영체제에 맞는 node.js를 먼저 다운로드하세요.

 

 

2. 설치 확인

node.js가 성공적으로 설치가 완료되었는지 확인하기 위해서는 작업용 폴더를 하나 만든 후에 vscode를 통해서 해당 폴더를 오픈합니다. 그리고 vscode의 terminal을 켜서

    npm -v

위 명령어를 입력합니다. 설치가 성공적으로 완료되었다면 설치 버전을 알려주는 코드가 등장합니다. (사진)

 

 

3. vue3 cli 설치

    npm install -g @vue/cli

npm을 사용하여 vue cli를 전역으로 설치하는 명령어로, 위 명령어를 입력하면 vue3 설치가 진행됩니다.

 

    vue create 파일명

만약 에러없이 성공적으로 설치가 완료되었다면 위 명령어를 입력합니다. 이때 파일명은 자율 작명으로 파일을 생성하는 것이 가능합니다.

 

    cd 파일명

파일명을 정하고 파일 생성이 완료되었다면 개발자가 지정한 파일명으로 위 명령어를 입력해서 해당 파일로 접근할 수 있습니다.

 

    npm run serve

만약 여기까지 에러없이 설치가 완료되었다면 해당 명령어를 입력하고 브라우저(http://localhost:8080)에 접속하면 vue3의 초기 화면이 띄워질 것입니다.

 

 

4. 부가 기능 설치

vscode 에디터의 왼쪽을 살펴보면 Extensions이라는 탭 메뉴가 있습니다. 이 탭 메뉴를 클릭하면 우리가 코딩을 할때 도움을 제공하는 몇가지  부가적인 소프트웨어를 다운받아서 사용할 수 있습니다. Vue.js에서 주로 사용하는 Vuter, Vue3 Snippets, HTML Support 세 가지를 추가로 설치하도록 합니다.

 

 

5. 설치 에러 발생

명령어 에러

만약 vue3 cli 설치시 npm 명령어에서 에러가 발생하였다면 npm 대신 yarn이라는 명령어를 사용하면 됩니다.

    yarn global add @vue/cli        // 설치 명령어
    yarn create vue-app my-project    // 파일 생성 명령어

만약 npm과 yarn 명령어 둘 다 에러가 발생한다면 node.js가 최신 버전이 아닌 경우가 대부분입니다. 혹은 command not found 에러가 발생했다면 node.js를 이상하게 설치해서 발생하는 문제입니다. 이럴 경우 node.js를 삭제하고 재설치 후 위 명령어를 다시 입력하는 것을 권장합니다. 

 

 

맥 Permission 에러

맥을 사용하는 개발자의 경우 Permission 에러가 발생했다면 npm이나 yarn 앞에 sudo 라는 단어를 붙여주면 됩니다. 

  sudo npm install -g @vue/cli
  sudo yarn install -g @vue/cli

sudo 라는 명령어를 사용해서 설치가 진행되면 설치 중간에 여러분이 사용하는 맥의 비밀번호 입력이 필요합니다. 

 

윈도우 Powershell 에러

윈도우를 사용하는 개발자의 경우 간혹 Powershell에서 '허가 되지 않은 스크립트 입니다~~~~' 와 같은 에러가 발생할 수 있습니다. 이런 에러가 발생했다면 powershell을 우클릭으로 클릭하고 관리자 권한으로 실행한 뒤

  Set-ExecutionPolicy Unrestricted

 위 명령어를 그대로 입력합니다. 위 명령어가 잘 입력되었다면 npm으로 시작하는 명령어가 잘 작동할 것입니다. 

반응형
LIST