1. Node.js 설치
Vue는 Node.js 기반이므로 Node가 설치되어 있어야 합니다.
📌 설치 방법:
- 공식 다운로드 페이지에서 LTS 버전 설치
- 설치 확인:
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 등 추가 패키지를 붙이면 프로젝트로 확장할 수 있습니다.
'FrontEND > vue' 카테고리의 다른 글
Pinia + Axios로 API 상태관리 연동하기 (0) | 2025.04.24 |
---|---|
Vue 3에서 Pinia 상태관리 적용 가이드 (0) | 2025.04.23 |
Vue 3 프로젝트에 Vue Router와 Axios 적용하기 (Vite 기반) (1) | 2025.04.22 |
Vue.js 개발 시 디버깅 방법 정리 (Vue 2 & Vue 3 기준) (0) | 2025.04.20 |
Vue에서 JWT + Refresh Token 인증 흐름 구현하기 (with Axios) (0) | 2025.04.18 |