Vue에서 Wijmo 사용하기

Vue용 Wijmo 구성요소를 사용하면 Vue 템플릿 마크업에서 Wijmo 컨트롤을 사용할 수 있습니다. Wijmo Vue 컴포넌트는 그것이 나타내는 Wijmo 컨트롤을 위한 랩퍼(Wrapper) 입니다. 컴포넌트는 백그라운드에서 위즈모 컨트롤 장치를 만들고 컨트롤(control) 속성을 통해 제어 인스턴스에 대한 참조를 제공합니다. 컴포넌트를 사용하면 Vue 템플릿 표시에서 선언적으로 컨트롤 속성 및 이벤트에 바인딩할 수 있습니다.

참고 npm에서 설치하는 것 외에도 Wijmo Dev Kit을 다운로드하는 것을 적극 권장합니다. 개발 키트에는 소스 코드, 참조 앱 등이 포함된 수백개의 샘플이 포함되어 있습니다.

설치

위즈모 Vue 컴포넌트는 핵심 라이브러리 패키지당 1개씩 npm 패키지 세트로 제공되며, 이름에 "vue2"라는 단어가 들어가 있습니다. 예를 들면, "wijmo.vue2.grid" 패키지는 핵심 "wijmo.grid" 패키지의 컨트롤를 위한 컴포넌트를 나타냅니다. 패키지는 별도로 설치하거나 "@gaphcity/wijmo.vue2.all" 그룹 패키지를 사용하여 함께 설치할 수 있습니다. :

npm install @grapecity/wijmo.vue2.all

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

Wijmo components 임포트하기

이 설정을 사용하면 Wijmo Vue 모듈을 가져와 이 모듈에 포함된 컴포넌트를 사용할 수 있습니다. 예를 들어, 이 코드는 앱 컴포넌트 템플릿에 wj-flex-grid 구성 요소를 추가합니다.

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

<script>
  import Vue from "vue";
  import "@grapecity/wijmo.vue2.grid";
  import { getData } from "./data";

  let App = Vue.extend({
    name: "app",
    data: function () {
      return {
        data: getData(),
      };
    },
  });
</script>

Wijmo css 추가하기

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

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

@import "../node_modules/@grapecity/wijmo.styles/wijmo.css";

여기서 파일로의 상대 경로를 지정해야합니다. 여기에는 node modules 폴더가 포함되어 있습니다.

일반 .js 파일을 사용하는 경우 파일 시작 부분에이 ESM import 문을 추가하십시오.

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

More Vue Instrucitons

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