맥(Mac)에서 Vue.js와 Vuetify 개발환경 구축 및 설치하기

개발환경

macbook pro (2019)
macOS Monterey 12.6.2
node 18.14.0 (LTS)
IDE : vscode

node.js 설치

node 공식 다운로드 (LTS 설치)

Download | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

vscode 플러그인 설치

Vetur (vue 2.x)

Volar (vue 3.x)

chrome 플러그인 설치

Vue.js devtools
크롬 개발자 도구에서 Vue 코드를 더 잘 파악할 수 있게 도와줌

Vue.js devtools

Browser DevTools extension for debugging Vue.js applications.

chrome.google.com

vue-cli

뷰로 빠르게 프로젝트를 구성하고 프로토 타이핑 하고 싶을 때 사용하는 CLI 도구

✅ 공식문서

https://cli.vuejs.org/guide/installation.html

설치

npm(node package manager)을 사용하기 위해 기본적으로 node.js가 설치되어 있어야 함

sudo npm install -g @vue/cli

# 버전 확인
vue --version

프로젝트 생성

vue create [프로젝트명]

❗️ 진행 시 주의할 점
vuetify 추천 버전을 사용하기 위해서는 vue2를 설치해야 한다.

설치 완료라고 예쁘게 뜬 메시지를 확인할 수 있다.

설치 확인

npm run serve

http://localhost:8080 접속

vuetify

vue 기반의 UI 프레임워크
bootstrap의 경우 css 위주이지만 vuetify는 js가 많이 포함되어 동적인 요소가 많음

적용

vue-cli가 설치된 프로젝트에 추가해야 함

vue add vuetify

recommended 설치

❗️ 진행 시 주의할 점
vuetify3는 프리뷰 버전이기 때문에, 추천 버전인 vuetify2를 사용하기 위해서는 vue2를 설치해야 함!

vue3를 설치한 경우 아래와 같은 에러가 발생한다.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.

아래와 같은 메시지가 출력되면 잘 설치된 것이다!