# Vue 응용 프로그램에서 ActiveReportsJS 보고서 디자이너 컴포넌트 사용

## Content

### Vue 응용 프로그램 만들기

새 Vue 응용 프로그램을 만드는 가장 쉽고 권장되는 방법은 [create-vue](https://github.com/vuejs/create-vue) 툴을 사용하는 것입니다. 명령 프롬프트나 터미널에서 다음 명령을 실행합니다:

```bash
npm create vue@3
```

TypeScript나 테스트 지원 등의 기능에 대한 몇 가지 질문이 있으며, 아래에서 추천 답변을 확인할 수 있습니다.

```text
✔ Project name: … arjs-vue-designer-app
✔ Add TypeScript? … Yes
✔ Add JSX Support? … Yes
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No

Scaffolding project in .arjs-vue-viewer-app...
Done.
```

### ActivereportsJS npm 패키지 설치

[@mescius/activereportsjs-vue](https://www.npmjs.com/package/@mescius/activereportsjs-vue) npm 패키지를 통해 Vue 보고서 디자이너 컴포넌트를 배포합니다. 이 패키지는 핵심 기능을 포함하는 기본 [@mescius/activereportsjs](https://www.npmjs.com/package/@mescius/activereportsjs) 패키지에 의존합니다.

이러한 패키지의 최신 버전을 설치하려면 애플리케이션의 루트 폴더에서 다음 명령을 실행하세요.

```bash
npm install @mescius/activereportsjs-vue@latest
```

yarn을 사용할 경우:

```bash
yarn add @mescius/activereportsjs-vue@latest
```

### 응용 프로그램에 ActiveReportsJS 보고서 추가

ActiveReportsJS는 보고서 템플릿 파일에 [JSON 형식](https://www.json.org/json-en.html) 및 `rdlx-json` 확장자를 사용합니다. `public` 폴더에서 `report.rdlx-json`이라는 새 파일을 만들고 다음 JSON 콘텐츠를 해당 파일에 삽입합니다.

```json
{
  "Name": "Report",
  "Body": {
    "ReportItems": [
      {
        "Type": "textbox",
        "Name": "TextBox1",
        "Value": "Hello, ActiveReportsJS Designer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}
```

### 응용 프로그램에 Vue 보고서 디자이너 컴포넌트 추가

`src\App.vue` 파일을 열고 기본 내용을 다음 코드로 바꿉니다. 이 [단일 파일 컴포넌트](https://vuejs.org/v2/guide/single-file-components.html)는 [Vue 보고서 디자이너](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component)를 사용하여 이전 단계에서 추가한 보고서 템플릿을 표시합니다. 또한 기본 [보고서 디자이너 컴포넌트 스타일](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Themes#built-in-themes)을 가져오고 디자이너 호스팅 요소의 스타일을 정의합니다.

```html
<template>
  <div id="designer-host">
    <JSDesigner v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }"></JSDesigner>
  </div>
</template>

<script lang="ts">
import { Designer } from "@mescius/activereportsjs-vue";

export default {
  name: "App",
  components: {
    JSDesigner: Designer,
  },
};
</script>

<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-ui.css"></style>
<style src="../node_modules/@mescius/activereportsjs/styles/ar-js-designer.css" ></style>

<style>
#designer-host {
  width: 100%;
  height: 100vh;
}
</style>
```

### 기본 앱 스타일 제거

기본 응용 프로그램 스타일이 보고서 뷰어 레이아웃을 방해하지 않도록 하려면, `src\main.ts` 파일을 열고 해당 내용을 다음으로 변경하세요.

```ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
```

### 응용 프로그램 실행 및 테스트

`npm run serve` 또는 `yarn serve` 명령을 사용하여 응용 프로그램을 실행할 수 있습니다. 기본적으로, 프로젝트는 [http://localhost:5173/](http://localhost:5173/)에서 실행됩니다.
응용 프로그램이 시작되면 ActiveReportsJS 디자이너 컴포넌트가 페이지에 나타납니다. 보고서 항목을 추가하고, 속성을 설정하고, 데이터 소스를 생성하는 등을 통해 기본 기능을 테스트할 수 있습니다. 보고서 디자이너 컴포넌트를 사용하는 방법에 대한 더 많은 정보는 [개발자 가이드](/activereportsjs/docs/DeveloperGuide/ActiveReportsJSViewer/Integration/Vue-Component)와 [온라인 데모](/activereportsjs/demos/features/viewer-integration/vue)에서 확인하실 수 있습니다.