Vue.js + Vite + Typescript 를 활용해서 오늘의 명언 앱 만들어보기 #1

출근길에 카톡 프로필들 보다가

'왜 이리 명언들이 많아?' 하는 생각에서 출발했다

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

프론트는 이런게 재밌음

머리속으로 생각만 해본걸 직접 만들어보는 재미가 있음

제목그대로 Vue.js + Vite + Typescript 로 갈 것임

Vite란게 뭐냐면 그냥 프론트엔드 빌드 툴임

기존의 웹팩 Webpack 떠올리면 이해 쉬울것

ES 모듈 기반이라 브라우저가 직접 파일을 처리하니 빠르고 수정 바로바로 잘 반영되고

핫 리로드가 장점임ㅋ

 

 

npm create vite@latest quote-app -- --template vue

 

 

플젝 폴더명은 quote-app 으로 했음

근데 갑자기

select a framework 라면서 Vanilla, Vue, 등등 선택하라고 나옴

요즘 npm create vite@latest 명령어가 인터랙티브로 바껴서

탬플릿 직접 선택하도록 하는게 기본 동작 된거같음...

귀찮지만

◇  Select a framework:
│  Vue
│
◇  Select a variant:
│  TypeScript

 

이렇게 선택했당

이제 아래의 명령어 3줄을 한줄씩 차례대로 입력 및 엔터!

 

 

cd quote-app
npm install
npm run dev

 

localhost 포트번호 안내 뜨는데로 크롬에 띄워보자

 

 

 

이 페이지가 뜨면 성공