Overview

Web Front Framework 중 하나인 Vue.js를 CLI로 설치하는 과정을 포스팅한다.

Environment

OS : macOS Catalina 10.15.7(19H2)
npm : 6.14.8
@vue/cli : 4.5.8
기준 일자 : 2020-10-21

설치 과정

npm 설치

패키지 관리툴인 npm을 사용하려면 node.js를 설치해야한다.

node.js는 이 링크에서 설치하거나 Homebrew에서 brew install npm 명령어를 통해 설치할 수 있다.

node.js를 설치한 후 터미널에서 npm -version 명령어로 설치 유무를 알 수 있다.

Vue 설치

프로젝트를 생성할 폴더로 이동하여 npm으로 Vue를 설치한다.

cd [Project Directory]/[vue-sample]
npm init
npm install vue

Vue CLI 설치

Vue 전용 CLI 도구인 vue-cli를 설치할때 macOS Catalina 이상부터는 /usr 폴더(시스템 root directory)에는 sudo 명령어로도 접근할 수 없어 Permission Denied 에러 로그와 함께 설치가 정상적으로 되지 않을 수 있다.

이를 해결하기 위해 node_modules가 설치된 경로(node pkg를 통해 설치했을 경우 /usr/local/lib/node_modules)로 이동하여 다음 명령어를 실행한다.

sudo chown -R $USER /usr/local/lib/node_modules

Vue CLI는 다음 명령어를 통해 설치한다.

sudo npm install i -g @vue/cli

Vue 프로젝트 생성

Webpack 모듈 번들러를 사용하는 Vue 프로젝트는 다음 명령어로 생성할 수 있다.

vue init webpack [Project Name]

Vue 프로젝트 실행

Vue 프로젝트를 실행하기 위해 프로젝트 폴더로 이동한 후 패키지를 인스톨한다.

npm install

Node 기본 템플릿 프로젝트는 다음 명령어를 통해 실행할 수 있다.

이때, dev 옵션은 package.json에서 정의할 수 있다.

npm run dev