맥(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

 

vscode 플러그인 설치

• Vetur (vue 2.x)

 

• Volar (vue 3.x)

 

chrome 플러그인 설치

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

Vue.js devtools

---

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.

 

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

 

설치 확인

npm run serve

 

• http://localhost:8080 접속

 

 

 

 

 

Reference

https://velog.io/@doobyeol/Vue-프로젝트-매니저-Vuetify-설치