1_Mac에서 vue.js 설치 (homebrew, npm...)

1. vue 세팅하는 여러가지 방법

1) CDN package 로 import하기 : 학습이나 프로토타입 만들 때

<script src="https://unpkg.com/vue@next"></script>

<!-- 또는 -->

<script src="https://unpkg.com/vue@3.2.31"></script>

 

2)npm을 이용하는 방법 :대규모 애플리케이션을 구축할 때 권장. NPM은 Webpack 또는 Browserify와 같은 모듈 번들러와 잘 작동함.

npm install vue@3.1.9 // 터미널에 입력

 

그러나 npm이용할 때 겪은 우여곡절.

(1) 일단  homebrew 설치 

homebrew 

- 맥, 리눅스용 패키지 관리자. 편리하게 이용 가능하지만 패키지의 안정성이 보장되지 않는 단점이 존재하긴 함

https://brew.sh/

터미널에

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

입력하기

 

 

(2) 그런데 가끔 zsh: command not found: brew 오류 뜰 때 있음

이럴 때는 터미널에 

echo 'export PATH="/opt/homebrew/bin:$PATH"' >> ~/.zshrc

 

요거 입력하기https://psip31.tistory.com/119

 

 

(3)그럼 또 node가 없다는 경고가 뜰 수도 있는데

그냥 

 brew install npm

입력해서 npm 설치 하기

 

그리고 잘 설치 되었는지 확인하려면 

node -v / npm -v 입력하고 버전 정보가 뜨면 잘 설치 된 것.

 

 

3)Vue CLI :

웹팩 기반 빌드 도구. 현재 유지관리 모드에 있으므로 특정 웹팩기능에 의존하지 않는한 Vite로 시작.

Vue CLI은 v4.5이상 사용할 것.

npm install -g @vue/cli // 터미널에 입력

 

4)Vite :

Vue SFC를 지원하고 가볍고 빠른 빌드 도구. 개발 서버 구동할 때 아주 빠르고, 소스 코드 변경이 일어났을 때 전체 모듈을 번들링 하는 것이 아니라 변경된 모듈만 교체하므로 개발을 더욱더 빠르게 진행 가능함.

 

npm init vite@latest // 터미널에 입력 -> 최신 버전 설치

 

-프로젝트 이름 설정

 

-옵션 선택 : 나는 ESlint ,prettier 빼고 NO 선택 

https://gymcoding.notion.site/ESLint-Prettier-0a2d35bab9254c26b4257e53bba218f7

 

- 아래 초록색 명령어를 차례대로 입력(npm run format 제외)

 

- 로컬 주소를 확인하고 해당 url로 확인하면 작업하는 내용 실시간 반영 되는 모습을 볼 수 있음.