간단하게 Vite로 프로젝트 생성하는 방법

2023. 2. 23. 15:10Vite

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

반응형

간단하게 Vite로 프로젝트 생성하는 방법에 대해서 알아보겠습니다.

 

https://vitejs-kr.github.io/guide/

 

Vite

Vite, 차세대 프런트엔드 개발 툴

vitejs-kr.github.io

 

선행 작업으로 node.js가 설치되어 있어야 합니다.

터미널을 오픈하세요.

 

 

1. npm으로 Vite 설치하기

npm create vite@latest

Project name: 진행하고자 하는 프로젝트 폴더명 입력하기

✔️ 각각의 옵션은 프로젝트 성향에 맞게 선택하기

Select a framework: Vanilla

Select a variant: JavaScript

cd 생성한_프로젝트_폴더명
npm install
npm run dev #서버 띄우기

 

잠시 서버 종료

ctrl + c #서버 종료

2. vite.config.js 파일 생성하기

touch vite.config.js #vite.config.js 파일 생성

서버 포트 설정해 주기

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    port: 3000,
  }
});

 

3. 다시 서버 띄우기

npm run dev

서버 실행

 

로컬호스트 3000으로 접속

 

제대로 실행했다면, 프로젝트 생성된 화면입니다!!

이렇게 간단하게 Vite로 프로젝트 생성하는 방법에 대해서 알아보았습니다.

반응형