# Vue3에서 Wijmo 사용하기

## Content

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 프로젝트를 생성하는 방법을 소개합니다.
![vue3_grid](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4c690227-0b77-46fb-8fb0-a29d6b0053e6/Vue3.3aff7a.460ca7.png)

>type=note
> 이 토픽 사용자가 Vue CLI를 사용하여 Vue3 애플리케이션을 생성하는 방법을 이해하고 있다고 가정합니다. 자세한 내용은 [Vue CLI](https://cli.vuejs.org/#getting-started)를 참조하시기 바랍니다.


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

1. Wijmo 패키지 설치
2. Wijmo 컴포넌트와 데이터 가져오기
3. Vue 데이터그리드 마크업 추가


### Wijmo 패키지 설치

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

```auto
npm install @mescius/wijmo.vue2.all
```


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

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

        ```javascript
        <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 파일

        ```javascript
        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를 가져옵니다.

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


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

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

```html
<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 데모](https://demo.mescius.co.kr/wijmo/learn-wijmo/)에서 확인하시기 바랍니다.