100가지 이상의 빠르고 유연한 Vue UI 컴포넌트

1. Vue 앱 폴더로 이동 후, npm을 사용해 Wijmo 라이브러리를 설치합니다.

* Vue 2 와 Vue 3 모두 npm 명령은 동일합니다.

npm install @mescius/wijmo.vue2.all

2. Wijmo 스타일 적용을 위한 css 파일을 추가합니다.

작업을 진행할 Vue 앱 src/main.js 파일에 접근하여, Wijmo css 파일을 추가합니다.

// main.js

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

3. 사용할 Wijmo 모듈을 추가합니다.

* 여기서는 보조 등록 함수를 사용하는 방법에 대해 설명합니다. 사용자 정의 컴포넌트 레벨에서 등록하는 방법은 여기를 참고해 주세요.

아래 코드는 Wijmo의 FlexGrid 컨트롤을 가져오는 코드입니다.

다른 컨트롤을 추가하고 싶은 경우, 아래에서 각 컨트롤 별 상세한 코드 샘플을 확인해 주세요.

// main.js

import   {   registerGrid   }   from     '@mescius/wijmo.vue2.grid'   ;

4. 하단의 초기화 관련 코드를 아래와 같이 수정합니다.

// main.js

let     app   =   createApp   (   App   ); 

registerGrid   (   app   ); 

app   .   mount   (   '#app'   );

아래는 수정된 src/main.js 내의 전체 코드입니다.

// 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' );    

5. Wijmo 컨트롤을 초기화하고, 화면에 추가합니다.

src/App.vue 파일에 접근하여 Wijmo 컨트롤을 초기화하고 샘플 데이터를 생성한 후, 화면에 Wijmo 컨트롤을 표시할 수 있도록 코드를 작성합니다.

자세한 코드는 아래에서 확인해 주세요.

6. Vue 앱을 실행하여 결과를 확인합니다.

npm run serve