Vue3에서 Wijmo 사용하기

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

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

Vue3 빠른 시작하기

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

빠른 시작은 아래 섹션으로 구성됩니다.

1. Wijmo 패키지 설치

2. Wijmo 컴포넌트와 데이터 가져오기

3. Vue 데이터그리드 마크업 추가

Wijmo 패키지 설치

1. Vue 애플리케이션을 열고, 패키지를 설치하려는 애플리케이션 폴더로 이동합니다.

2. 다음 명령을 실행하여 npm을 사용해 Wijmo의 Vue 패키지를 설치합니다:

npm install @mescius/wijmo.vue2.all

Wijmo 컴포넌트와 데이터 가져오기

1. 필요한 Wijmo 컴포넌트와 디렉티브를 가져와 컴포넌트 수준에서 등록합니다. FlexGrid 예제의 경우, 다음 파일의 코드를 포함하여 App.vue 파일의 template 섹션에 wj-flex-grid 컴포넌트를 추가합니다:

   1. App.vue 파일

      <script setup>
      import * as wjcCore from "@mescius/wijmo";
      import { ref } from "vue";
      const data = ref(_getData()); 
      function _getData() {
        // create some
         random data
         let countries ="US,Germany,UK,Japan,Italy,Greece".split(","),
          data = [];
          for (let i = 0; i< countries.length; i++) {
            data.push({
                id: i,
                country:
          countries[i],
                sales:Math.random() * 10000,
                expenses:Math.random() * 5000,
            });
        }
        return data;
      }
      </script> 
      
      <template>
      
        <div class="container-fluid">
      
         </div>
      
      </template>

   2. Main.js 파일

      import '@mescius/wijmo.styles/wijmo.css';
      import { createApp } from "vue";
      import App from "./App.vue";
      import { registerGrid } from "@mescius/wijmo.vue2.grid";
      const app = createApp(App);
      registerGrid(app);
      app.mount('#app');

2. main.js 파일의 상단에 CSS import 문을 추가하여 Wijmo CSS를 가져옵니다.

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

Vue 데이터그리드 마크업 추가

WjFlexGrid 컴포넌트는 HTML에서 소문자-대시(lower-case-dash) 표기법을 사용하므로 wj-flex-grid로 작성됩니다.

<template>
  <div class="container-fluid"> 
<wj-flex-grid :itemsSource="data"
:initialized="flexInitialized">         
<wj-flex-grid-column :header="'Country'"
:binding="'country'" width="2*" />        
<wj-flex-grid-column :header="'Sales'"
:binding="'sales'" width="*" format="n2" />         
<wj-flex-grid-column :header="'Expenses'"
:binding="'expenses'" width="*" format="n2" />     
</wj-flex-grid>
  </div>
</template>

Vue 애플리케이션에 Wijmo FlexGrid를 성공적으로 통합했습니다. 기타 차트, 입력, OLAP 등 추가 컴포넌트는 Wijmo 데모에서 확인하시기 바랍니다.