Categories: 개발

[Vue] Vite로 프로젝트 시작하기

프로젝트 생성하기

시작하기에 앞서 Vite 는 Node 18 이상 설치 되어있어야 한다.
터미널(cmd) 에서 프로젝트가 생성되길 원하는 경로에서 명령어를 실행한다.
[my-app] 이란 이름으로 Vite 프로젝트를 생성하였다.

npm create vite my-app --template vue

명령어 실행 후 프로젝트를 생성에 관련된 몇가지 질문이 나온다.

Framework 는 Vue로 선택한다.

Typescript를 주로 하기도 하지만 Typescript로 하면 귀찮은 면도 있어서…
Javascript 로 선택하였다.

터미널 명령어를 쳤던 경로에 프로젝트가 생성되어있는 것을 확인 할 수 있다.

패키지 다운 및 실행

생성된 프로젝트를 IDE 툴로 열어본다.
이 후 터미널에서 패키지들을 다운로드 해주도록 한다.

npm install
혹은
yarn

명령어를 치면 node_module 파일이 생성되고 이제 프로젝트 준비는 끝났다.

npm run dev
혹은
yarn dev

명령어를 치면 서버가 실행되고 local 주소가 터미널에 나온다.

local 주소를 들어가보면 페이지가 잘 뜨는걸 확인 할 수 있다.
참고로 이건 App.vue 의 페이지이다.

이제 Vite 프로젝트 준비는 끝났다. 개발을 시작해보자.

mana

Recent Posts

[여행] 1박 2일 경주 뚜벅이 여행기

경주시티투어 이번 여행에 앞서 뚜벅이 여행객들에게 추천하는게 바로 경주시티투어 이다. 경주시티투어 사이트로이동 경주시티투어는 여러가지가 있다.1.…

8개월 ago

[공공데이터] 공공 API 사용하기 – 지하철 실시간 도착 정보

열린데이터 광장 공공데이터 사이트로 이동 서울 열린데이터 광장에서는 서울에 관한 여러가지 공공 API 를 제공한다.그…

8개월 ago

[Vue] Props 와 Emit – 부모 함수 사용하기

Props props 는 쉽게 생각해서 부모가 자식에게 주는 데이터이다.먼저 부모에게 물려받을 데이터를 자식 컴포넌트에 정의한다.…

8개월 ago

이자 계산기

이번에는 이자 계산기 사이트를 만들어봤습니다. 이자 계산기 바로가기 vue로 하다보니 금액이나 이자율 같은 input 태그의…

8개월 ago

[SpringBoot+Nginx+vite]유틸 사이트를 만들어봤습니다.feat.핫딜 모음

유틸 사이트로 이동 웹사이트 개설 나의 블로그의 접속자 수는 처참하지만 내가 블로그를 시작하면서생각했던 계획은 내…

9개월 ago

[GitHub] Actions로 서버에 자동배포하기

과정 시작하기에 앞서 과정부터 설명해드리겠습니다.master branch에 push 가 되면 GitHub Actions 에서소스를 build 를 하고…

9개월 ago