Vue3에서 Wijmo 사용하기

Wijmo는 Vue에 대한 기본 지원을 제공하여, 강력한 UI 컴포넌트를 Vue 애플리케이션에 손쉽게 통합할 수 있도록 해줍니다. Wijmo의 가볍고 뛰어난 성능의 컨트롤을 활용하면 Vue의 반응형 구조와 컴포넌트 기반 아키텍처를 바탕으로, 반응형 데이터 중심 애플리케이션을 효율적으로 개발할 수 있습니다.

Vue용 Wijmo 컴포넌트를 사용하면 Vue 템플릿 마크업 내에서 Wijmo 컨트롤을 직접 사용할 수 있습니다. 각 Wijmo Vue 컴포넌트는 해당 Wijmo 컨트롤을 감싸는 래퍼 역할을 하며, 내부적으로 컨트롤 인스턴스를 자동으로 생성하여 control 속성을 통해 접근할 수 있도록 합니다.

또한, 템플릿 내에서 컨트롤의 속성과 이벤트를 선언적으로 바인딩할 수 있는 기능도 지원합니다.

type=info
참고: Vue 2에서 Wijmo를 사용 중이라면, Vue 3로의 마이그레이션 및 기존 커스텀 컴포넌트의 업데이트를 권장드립니다. 이를 통해 완전한 호환성을 확보할 수 있습니다.

Vue3 빠른 시작하기

이번 섹션에서는 Vue 3 프로젝트에서 Wijmo를 설정하는 과정을 단계별로 안내합니다. 예시로는 Wijmo의 컴포넌트를 사용하며, Composition API 기반의 Vue 3 프로젝트를 생성하는 방법을 소개합니다.

Wijmo 패키지 설치하기

Vue 애플리케이션을 열고, 패키지를 설치하려는 애플리케이션 폴더로 이동합니다. 아 명령어를 실행하여 npm을 통해 Wijmo의 Vue 패키지를 설치합니다:

npm install @mescius/wijmo.vue2.all

Wijmo의 NPM 패키지에 대한 자세한 내용은 이 주제를 참조해주세요.

Composition API와 함께 Wijmo 컴포넌트 가져오기

Vue3 프로젝트에서 Wijmo 컴포넌트는 다음 두 가지 방식으로 사용할 수 있습니다:

사용자 정의 컴포넌트 레벨 등록
보조 등록 함수 사용

이 설정을 통해 Wijmo Vue 모듈을 가져와 해당 모듈에 포함된 컴포넌트를 사용할 수 있습니다. 예시로 아래 코드는 wj-flex-grid 컴포넌트를 App 컴포넌트의 템플릿에 추가하는 방법을 보여줍니다:

사용자 정의 컴포넌트 레벨 등록

해당 등록 방법은 Wijmo 컴포넌트와 지시자를 컴포넌트 수준에서 등록하는 방식입니다. 예를 들어, 아래 코드는 Wijmo 컴포넌트와 지시자를 가져와서 컴포넌트 수준에서 등록하는 방법을 보여줍니다.

<script setup> 
import { ref } from 'vue'; 

import { WjTooltip as vWjTooltip} from '@mescius/wijmo.vue2.core'; //import directive
import { WjInputNumber } from '@mescius/wijmo.vue2.input'; //import component
const count = ref(3) // variables

</script> 

<template> 
  <button v-wjTooltip="'Just a string'"> 
    Paragraph with a string tooltip. 
  </button> 
  <br> 
  <wj-input-number v-model:value="count"></wj-input-number><br> 
</template>

보조 등록 함수 사용

해당 설정을 통해 Wijmo Vue 모듈을 가져와 애플리케이션 수준에서 해당 모듈에 포함된 컴포넌트와 지시자를 사용할 수 있습니다.

이 방법은 애플리케이션 내에서 여러 Vue 컴포넌트가 Wijmo 컴포넌트를 사용할 때 유용합니다. 예를 들어, 아래 코드는 wj-flex-grid 컴포넌트를 App 컴포넌트의 템플릿에 추가하는 방법을 보여줍니다.

main.js

import { createApp } from 'vue' 
import App from './App.vue' 
import '@mescius/wijmo.styles/wijmo.css'; 
import {registerGrid} from "@mescius/wijmo.vue2.grid" 

let app = createApp(App); 
registerGrid(app); 
app.mount('#app')

app.vue

<script setup> 
import { ref } from 'vue' 
// variables 

const data = ref(getData()) 
//methods 

function getData() { 

  var data = []; 
  var countries= "US,Japan,India,Italy,UK".split(","); 
  for (let i = 0; i < 5; i++) { 
    data.push({ 
      id: i+1, 
      country: countries[i%countries.length], 
      sales: Math.random() * 1000, 
      downloads: Math.random() * 1000 
    }); 
  } 
  return data; 
} 
</script> 

<template> 
  <wj-flex-grid :itemsSource="data"></wj-flex-grid> 
</template>

Vue 모듈에서 registerModuleName을 한 번만 가져오면 되며, 이상적으로는 단일 페이지 애플리케이션(SPA)의 root 모듈에서 가져오는 것이 좋습니다.

Wijmo CSS 추가하기

Wijmo 컨트롤이 올바르게 보이고 작동하려면 Wijmo CSS 스타일을 응용 프로그램에 로드해야 합니다. 스타일은 @mescius/wijmo.styles npm 패키지로 제공됩니다.

wijmo.css - 모든 Wijmo 컨트롤에 대한 스타일 포함

응용 프로그램의 루트 구성 요소 파일에 스타일을 로드할 수 있습니다. 단일 파일 컴포넌트 .vue 파일을 사용하는 경우 style 섹션 맨 위에 다음과 같이 css import 문을 추가 하십시오.

import "@mescius/wijmo.styles/wijmo.css";

더 많은 Vue 정보

Vue 애플리케이션에서 Wijmo 사용에 대한 자세한 정보는 Vue 구성 요소 주제를 참조하십시오.