1. 프로젝트 초기화 및 생성

Vite는 최신 프론트엔드 빌드 도구로, 매우 빠른 개발 속도를 제공합니다. 프로젝트를 시작하기 위해 먼저 터미널에서 다음 명령어 중 하나를 실행합니다.

# npm 사용 시
npm create vite@latest

# yarn 사용 시
yarn create vite

# pnpm 사용 시
pnpm create vite

명령어를 실행한 후 다음과 같은 단계를 거칩니다.

1. Project name: 프로젝트 폴더 이름을 입력합니다. (예: my-vue-app)
2. Select a framework: Vue를 선택합니다.
3. Select a variant: JavaScript 또는 TypeScript를 선택합니다.

설정이 완료되면 해당 폴더로 이동하여 의존성 패키지를 설치하고 개발 서버를 실행합니다.

cd my-vue-app
npm install
npm run dev

2. SCSS 환경 구성

CSS 전처리기를 사용하면 스타일 관리가 훨씬 효율적입니다. Vite 프로젝트에 Sass(SCSS)를 추가하는 방법은 다음과 같습니다.

먼저 Sass 패키지를 개발 의존성으로 설치합니다.

npm install -D sass

전역 스타일 파일이나 공통 변수를 사용하기 위해 src/styles/global.scss 파일을 생성합니다. 그 후, 모든 컴포넌트에서 이 파일을 자동으로 참조할 수 있도록 vite.config.js를 수정합니다.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 전역에서 사용할 SCSS 파일 경로 설정
        additionalData: `@use "./src/styles/global.scss" as *;`
      }
    }
  }
})

3. Vue Router 설정

SPA(Single Page Application)의 페이지 이동을 제어하기 위해 vue-router를 설치하고 구성합니다.

npm install vue-router@4

라우터 관리를 위해 src/router 디렉터리를 만들고 내부 파일들을 정의합니다.

src/router/routes.js (라우트 정의)

const routes = [
  {
    path: '/',
    redirect: '/dashboard'
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('../views/Dashboard.vue'),
    meta: { title: '대시보드' }
  }
];

export default routes;

src/router/index.js (라우터 인스턴스 생성)

import { createRouter, createWebHistory } from 'vue-router';
import routes from './routes';

const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior() {
    return { top: 0 };
  }
});

// 네비게이션 가드: 페이지 타이틀 변경 등 처리
router.afterEach((to) => {
  const title = to.meta.title;
  if (title) {
    document.title = `My App - ${title}`;
  }
});

export default router;

4. 메인 설정 및 엔트리 포인트

마지막으로 설정한 라우터를 애플리케이션에 등록해야 합니다. main.js 파일을 다음과 같이 구성합니다.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.mount('#app')

애플리케이션의 루트 컴포넌트인 App.vue에는 라우팅된 컴포넌트가 렌더링될 위치를 지정합니다.

<template>
  <router-view />
</template>

<style lang="scss">
/* 전역 스타일 설정 */
body {
  margin: 0;
  font-family: sans-serif;
}
</style>

5. 추가적인 Vite 설정

Vite의 vite.config.js 파일에서는 빌드 옵션, 개발 서버 포트 설정, 경로 별칭(Alias) 지정 등 다양한 최적화 설정을 수행할 수 있습니다. 프로젝트 규모가 커질수록 resolve.alias 설정을 통해 파일 참조 경로를 단순화하는 것이 권장됩니다.