프로젝트 설정 개요

CLI 프로젝트 생성(scaffolding) 기능 구현을 위한 Configuration 문서입니다.

• main 브랜치: Vue 3.x + Vite
• staging 브랜치: Vue 2.x + Webpack

기술 스택 비교

카테고리	main (Vue 3.x)	staging (Vue 2.x)
프레임워크	Vue 3.5	Vue 2.6.14
빌드 도구	Vite 7	Webpack 5
언어	JavaScript + TypeScript	JavaScript + TypeScript (혼용)
상태 관리	Vuex 4 + vuex-persist	Vuex 3 + vuex-persistedstate
라우터	vue-router 4	vue-router 3
UI 프레임워크	Tailwind CSS 4	Bootstrap 4 + bootstrap-vue 2
CSS 전처리	SCSS + Tailwind + PostCSS	SCSS + PostCSS (autoprefixer)
i18n	vue-i18n 11 (Composition API)	vue-i18n 8 (Options API)
테스트 (단위)	Vitest 4	Vitest (vite-plugin-vue2)
테스트 (E2E)	Playwright	Playwright
린팅	ESLint 9 (flat config)	ESLint 9 (flat config)
포맷팅	Prettier 3	Prettier 3
모니터링	Sentry (@sentry/vue 10)	Sentry (@sentry/vue 7)
폰트	Pretendard	Pretendard
WASM	vite-plugin-wasm	webpack syncWebAssembly
패키지 매니저	pnpm	npm (package-lock.json)
Git Hooks	Husky + lint-staged	Husky + lint-staged
번들 분석	rollup-plugin-visualizer	-
Babel	불필요 (Vite/esbuild)	@babel/preset-env + 플러그인
Composition API	네이티브 지원	@vue/composition-api 백포트

CLI 프로젝트 생성 시 체크리스트

Vue 3.x (main) 프로젝트 생성 시 필요한 파일

1. package.json (dependencies, devDependencies, scripts)
2. vite.config.js (플러그인, 별칭, 빌드 설정)
3. tsconfig.json (경로 별칭, 타입)
4. eslint.config.mjs (flat config)
5. .prettierrc.json
6. postcss.config.js (tailwind + autoprefixer)
7. tailwind.config.js (커스텀 테마)
8. index.html (루트)
9. vitest.config.js
10. playwright.config.mjs
11. .npmrc (pnpm 설정)
12. pnpm-workspace.yaml
13. .env.example
14. src/main.js, src/i18n.js, src/plugins/

Vue 2.x (staging) 프로젝트 생성 시 필요한 파일

1. package.json (dependencies, devDependencies, scripts)
2. webpack.config.cjs (loaders, 플러그인, 별칭)
3. babel.config.js (프리셋, 플러그인, 별칭)
4. tsconfig.json (경로 별칭, 타입)
5. eslint.config.mjs (flat config)
6. .prettierrc.json
7. postcss.config.js (autoprefixer only)
8. public/index.html (webpack 템플릿)
9. vitest.config.js (vite-plugin-vue2)
10. playwright.config.mjs
11. .env.example
12. src/main.js, src/i18n.js, src/vue-shim.d.ts