FrontEND/vue

Vue 3 + Vite + CSS 프레임워크 (Tailwind CSS 기준)

mingmingIT 2025. 4. 21. 18:39

1. Node.js 설치

Vue는 Node.js 기반이므로 Node가 설치되어 있어야 합니다.

📌 설치 방법:

node -v
npm -v

2. Vue 프로젝트 생성 (Vite 사용)

Vite는 Vue 3의 공식 빌드 도구로, 빠르고 설정이 간편합니다.

npm create vite@latest my-vue-app
 

my-vue-app은 프로젝트 이름입니다. 원하는 이름으로 바꾸셔도 됩니다.

선택 옵션:

  • Framework: Vue
  • Variant: JavaScript or TypeScript (원하는 것 선택)

설정 완료 후:

cd my-vue-app
npm install
npm run dev

http://localhost:5173에서 기본 Vue 앱을 확인할 수 있습니다.


3. CSS 프레임워크 설치 – Tailwind CSS 기준

📦 Tailwind 설치:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

📄 tailwind.config.js 설정:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

📄 src/assets 폴더에 CSS 파일 생성:

src/assets/tailwind.css 파일 생성 후 다음 내용 추가:

@tailwind base;
@tailwind components;
@tailwind utilities;

📄 main.js에 Tailwind CSS import:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'

createApp(App).mount('#app')

4. 테스트 – Tailwind 작동 확인

src/App.vue 파일에서 아래처럼 테스트해보세요:

<template>
  <div class="min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 text-white flex items-center justify-center">
    <h1 class="text-4xl font-bold">Tailwind CSS 적용 완료!</h1>
  </div>
</template>

Tailwind가 잘 적용되었다면 배경 그라디언트와 흰색 글씨의 제목이 보일 겁니다.


🔧 추가 팁: 자동 완성 + 설정

✅ VS Code 확장 추천:

✅ Prettier + Tailwind 플러그인 추가 (선택):

npm install -D prettier prettier-plugin-tailwindcss

.prettierrc 설정:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

✅ 그 외 CSS 프레임워크 사용 예시

Tailwind 외에 다른 프레임워크도 아래처럼 설치할 수 있습니다.

💄 Bootstrap 5:

npm install bootstrap
import 'bootstrap/dist/css/bootstrap.min.css'

💅 Bulma:

npm install bulma
import 'bulma/css/bulma.css'

🧩 마무리

이제 Vue + CSS 프레임워크가 적용된 기본 개발 환경이 완성되었습니다!
이 상태에서 컴포넌트를 만들거나, Vue Router, Pinia 등 추가 패키지를 붙이면 프로젝트로 확장할 수 있습니다.