[Vite + Vue3 실전 가이드]① Vite + Vue3 프로젝트 초기 세팅방법

1. Vite + Vue 프로젝트 초기 세팅 방법

1. Node.js 설치
   • Node.js LTS 버전(14 이상) 설치 필요
2. 프로젝트 생성

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

   
   
3. 프로젝트 디렉터리 이동
   

   cd my-vue-app
   

4. 의존성 설치
   

   npm install
   

5. 개발 서버 실행
   

   npm run dev
   

   • 브라우저에서 http://localhost:5173 접속
     
     

2. 주요 설정 파일

• vite.config.js
  • Vite 빌드 및 플러그인 설정 담당
  • 기본 예시: Vue 플러그인 추가

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [vue()],
    server: {
      port: 3000,
      open: true,
    },
  })
  

• package.json
  • 스크립트 및 의존성 관리
  • 주요 스크립트 예:

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
  

• main.js (또는 main.ts)
  • Vue 앱 진입점
  • 예:

  import { createApp } from 'vue'
  import App from './App.vue'
  
  createApp(App).mount('#app')
  

3. Vite + Vue의 성능 장점

• 초고속 빌드 및 개발 서버 시작
  • Vite는 ES 모듈 기반으로, 필요한 파일만 즉시 로드
  • 전체 번들 빌드 없이 빠른 개발 환경 제공
• 빠른 HMR(Hot Module Replacement)
  • 코드 변경 시 전체 리로드 없이 해당 모듈만 빠르게 교체
  • 개발 생산성 극대화
• 최적화된 번들링
  • Rollup 기반 빌드로 최종 번들 크기 최소화
  • 코드 스플리팅과 트리 쉐이킹 지원
• 최신 웹 표준 지원
  • ESNext 문법 및 최신 브라우저 API 기본 지원
  • 별도 설정 없이 최신 기능 활용 가능
• 플러그인 시스템
  • Vue 공식 플러그인, TypeScript, JSX, PWA 등 다양한 플러그인 쉽게 통합 가능
    
    

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.