NutUI 기반 모바일 웹 및 다중 플랫폼 앱 개발 가이드

NutUI 소개

NutUI는 Vue.js 기반의 경량 모바일 UI 컴포넌트 라이브러리로, JD 스타일의 디자인을 반영하여 직관적이고 일관된 사용자 인터페이스를 제공합니다. Vue 2와 Vue 3 모두를 지원하며, Taro 프레임워크와의 통합을 통해 H5, 위챗 소형프로그램(小程序), 그리고 기타 다수의 마이크로앱 플랫폼에서 동일한 코드베이스로 개발할 수 있습니다.

이 라이브러리는 레이아웃, 폼 입력, 데이터 표시, 내비게이션 메뉴 등 다양한 UI 요소를 포함하고 있으며, 기업용 백오피스 시스템이나 관리자 대시보드 구축에 적합합니다. NutUI는 Ant Design과 Alibaba Design의 철학을 참고하여 구성되어 있어, 디자인 일관성과 접근성 측면에서 높은 평가를 받고 있습니다.

프로젝트 설정 및 설치

새로운 Taro 기반 Vue 프로젝트를 시작하기 전, 글로벌 Taro CLI 도구가 필요합니다:

npm install -g @tarojs/cli

또는 Yarn을 사용하는 경우:

yarn global add @tarojs/cli

Taro 프로젝트 생성

CLI 명령어로 새로운 프로젝트를 초기화합니다:

taro init my-taro-project

설치 과정 중 프레임워크 선택 단계에서 Vue 3를 선택하고 기본 설정을 완료합니다.

NutUI 설치

생성된 프로젝트 디렉토리 내에서 다음 명령으로 NutUI를 추가합니다:

npm install @nutui/nutui-taro

빌드 설정 조정

프로젝트 루트의 config/index.js 파일에 아래 설정을 추가해 트랜스파일링 범위를 확장합니다:

module.exports = {
  plugins: ['@tarojs/plugin-html'],
  build: {
    esnextModules: ['@nutui/nutui-taro']
  }
}

컴포넌트 전역 등록

예를 들어, 버튼 컴포넌트를 앱 전역에서 사용하려면 src/app.ts 또는 진입점 파일에서 다음과 같이 처리합니다:

import { createApp } from 'vue'
import { Button } from '@nutui/nutui-taro'
import App from './App.vue'

const app = createApp(App)
app.use(Button)
app.mount('#app')

등록 후 템플릿 내에서 <nut-button> 태그를 자유롭게 사용할 수 있습니다.

실제 적용 사례

NutUI는 특히 크로스 플랫폼 요구사항이 있는 프로젝트에서 강점을 발휘합니다. 예를 들어:

H5 + 위챗 소형프로그램 동시 지원: 동일한 Vue 기반 코드로 웹과 소형프로그램을 동시에 배포 가능.
관리자 패널 개발: 폼, 테이블, 카드 레이아웃 등을 활용한 대시보드 구성.

괴물 클럽