마이그레이션 가이드
다른 UI 라이브러리에서 lh-ui-plus로 마이그레이션하는 단계와 주의 사항입니다.
Element Plus에서 마이그레이션
주요 차이점
| 특성 | Element Plus | lh-ui-plus |
|---|---|---|
| 접두사 | el- | lh- |
| 테마 | SCSS 변수 | CSS 변수 (88+ 토큰) |
| 다크 모드 | 내장 (html.dark 클래스 전환) | 완전한 지원 (data-theme + useLhTheme) |
| 문양 배경 | 없음 | 6가지 프리셋 |
컴포넌트 매핑
| Element Plus | lh-ui-plus |
|---|---|
ElButton | LhButton |
ElInput | LhInput |
ElForm | LhForm |
ElSelect | LhSelect |
ElDialog | LhDialog |
마이그레이션 단계
- import 경로 교체
- 컴포넌트 태그 접두사 교체
- themeVars 구성 확인
pnpm lint와pnpm typecheck실행
Ant Design Vue에서 마이그레이션
Ant Design은 ant- 접두사를, lh-ui-plus는 lh- 접두사를 사용합니다.
| Ant Design Vue | lh-ui-plus |
|---|---|
a-button | LhButton |
a-input | LhInput |
a-form | LhForm |
일반적인 마이그레이션 권장 사항
- 먼저 테스트 실행 — 마이그레이션 전에 프로젝트가 정상적으로 빌드되는지 확인
- 컴포넌트를 하나씩 교체 — 한 번에 모두 교체하지 마세요
- 테마 차이점 확인 — CSS 변수와 SCSS 변수의 매핑
- API 문서 확인 — props/events의 호환성 확인