Vite + vue3 시작하기

참고 사이트 : https://vitejs-kr.github.io/guide/

Vite

 

시작하기 무작정 따라 해보기

 

첫 vite 프로젝트 만들어보기

node js 가 필요하다고 하네요.

설치합니다. Next만으로 설치가능합니다.

https://nodejs.org/en/

Node.js

Lastest Features로 다운로드 받아서 설치했습니다.

 

 

npm 명령어를 사용 해보려고 우선 vscode를 실행해서 터미널을 열어봅니다.

vscode 실행 후 새터미널 열기

 

명령어를 복사해서 그대로 붙여넣기 하였습니다.

터미널창에 npm 명령어 입력

 

Project name 은 기본값으로 Enter

Select a framework는 방향키로 이동해서 Vue로 Enter

Select a variant vue 선택했습니다.

친절하고 간단하네요 ㅇㅅㅇ)

C:\Users\CSE\vite-project에 생성 됨

다른 방법도 안내되어 있네요. (vite 사이트 참고)

 

생성된 프로젝트 소스를 열어 보겠습니다.

폴더열기

생성한 프로젝트로 이동하여 폴더 선택

신뢰해야한데요, 신뢰합니다.

 

이제 웹서버를 올려볼까요?

하단의 터미널에서 npm install을 입력하고 Enter

 

npx vite --port=4000 입력하고 Enter

사이트가 올라왔습니다. 

브라우저에 http://localhost:4000/ 접속하면 짜란~

간단하네요~

 

시작 페이지의 안내처럼 확장프로그램에 Volar 까지 Install 하겠습니다.

확장 마켓플레이스에 volar 검색해서 설치

 

기본 생성된 HelloWorld.vue 소스파일을 구경 해 봅니다.

 

 

vue 3 를 타이핑 해 볼 준비를 마친거 같습니다.

 

오늘은

요까이

끝.