NuxtJS에서 SpreadJS 시작하기

SpreadJS는 VueJS 기반 웹 앱 개발 프레임워크인 NuxtJS를 지원합니다. NuxtJS는 개발을 쉽고 빠르며 체계적으로 만들어 줍니다. NuxtJS는 React.js 프레임워크인 NextJS와 매우 유사합니다. NuxtJS의 주요 기능으로는 폴더 구조, 서버 사이드 렌더링(SSR), 정적 렌더링, 코드 분할 등이 있습니다.

자세한 내용은 https://nuxtjs.org/docs/get-started/installation 를 참고하세요.

이 튜토리얼에서는 SpreadJS를 사용하는 Nuxt.js 애플리케이션을 만드는 방법을 안내합니다.

Vue2

Nuxt.js 애플리케이션 생성하기

Nuxt.js 애플리케이션을 만드는 가장 쉬운 방법은 Create Nuxt App 도구를 사용하는 것입니다.

명령 프롬프트 또는 터미널에서 다음 명령어를 실행하여 Nuxt.js 프로젝트를 생성하세요.
```
npx create-nuxt-app nuxt2WithSJS
```
터미널에서 설정 메시지가 표시되면 필요한 옵션을 선택하고 Enter 키를 눌러 확인하세요. 터미널이 프로젝트를 설치하고 생성할 때까지 잠시 기다리세요. 여러 질문이 나오면 다음과 같이 응답할 수 있습니다:
```
Project language: JavaScript
Project manager: Npm
UI framework: None
Template engine: HTML
Nuxt.js modules: Axios
Linting tools: ESLint
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static
Development tools: jsconfig.json
Continuous integration: None
Version control system: Git
```
터미널에 다음 명령어들을 입력하세요.
```
cd nuxt2WithSJS
npm run dev
```
브라우저에서 다음 링크를 열면 NuxtJS 환영 페이지가 표시됩니다.
http://localhost:3000/
현재 터미널을 닫고, Visual Studio Code 또는 IDE에서 nuxtjs-with-spreadjs 폴더를 엽니다.

SpreadJS 설치하기

SpreadJS 패키지를 설치하세요.
```
npm install --save @mescius/spread-sheets-vue
```
애플리케이션의 루트 폴더에 components 폴더가 없으면 생성하세요.

components 폴더에 SpreadSheet.vue 파일을 생성하고, 다음 코드를 추가하세요. 컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이선스 키를 입력할 수 있습니다.

<template>
<div>
    <gc-spread-sheets :hostClass='hostClass'>
        <gc-worksheet :dataSource="dataTable">
            <gc-column :width="width" :dataField="'preferredFullName'"></gc-column>
            <gc-column :width="width" :dataField="'jobTitleName'"></gc-column>
            <gc-column :width="width" :dataField="'phoneNumber'"></gc-column>
            <gc-column :width="width" :dataField="'region'"></gc-column>
        </gc-worksheet>
    </gc-spread-sheets>
</div>
</template>

<script>
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@mescius/spread-sheets-vue'
import * as GC from "@mescius/spread-sheets";

// SpreadJS 라이선싱
var SpreadJSKey = "xxx";          // 유효한 라이선스 키를 입력하세요.
GC.Spread.Sheets.LicenseKey = SpreadJSKey;

export default {
    data() {
        return {
            hostClass: 'spread-host',
            width: 100
        }
    },
    computed: {
        dataTable() {
            return [{
                    "jobTitleName": "Developer",
                    "preferredFullName": "Romin Irani",
                    "region": "CA",
                    "phoneNumber": "408-1234567"
                },
                {
                    "jobTitleName": "Developer",
                    "preferredFullName": "Neil Irani",
                    "region": "CA",
                    "phoneNumber": "408-1111111"
                },
                {
                    "jobTitleName": "Program Directory",
                    "preferredFullName": "Tom Hanks",
                    "region": "CA",
                    "phoneNumber": "408-2222222"
                }
            ];
        }
    }
}
</script>

<style scoped>
.spread-host {
    width: 600px;
    height: 600px;
}
</style>

pages/index.tsx 파일의 기본 내용을 아래 코드로 교체하세요.

<template>
<div>
    <h1>
        Adding Spreadsheets to a Jamstack Application
    </h1>
    <p>
        Nuxt.JS v2 + SpreadJS demo
    </p>
    <SpreadSheet />
</div>
</template>

실행 및 테스트하기

앱은 npm run dev 명령어로 실행할 수 있습니다.

기본적으로 프로젝트는 http://localhost:3000/에서 실행됩니다.

Vue3

Nuxt.js 애플리케이션 생성하기

Nuxt.js 애플리케이션을 만드는 가장 쉬운 방법은 Create Nuxt App 도구를 사용하는 것입니다.

명령 프롬프트나 터미널에서 다음 명령어를 실행하여 Nuxt.js 프로젝트를 생성하세요.
```
npx nuxi init nuxt3WithSJS
```
터미널에 다음 명령어들을 입력하세요.
```
cd nuxt3WithSJS
npm install
npm run dev
```
브라우저에서 다음 링크를 열면 NuxtJS 환영 페이지가 표시됩니다.
http://localhost:3000/
현재 터미널을 닫고, Visual Studio Code 또는 다른 IDE에서 nuxtjs-with-spreadjs 폴더를 열어주세요.

SpreadJS 설치하기

SpreadJS 패키지를 설치합니다.
```
npm install --save @mescius/spread-sheets-vue
```
애플리케이션 루트 폴더에 components 폴더가 없다면, 새로 생성하세요.

SpreadSheet.vue라는 JavaScript XML 파일을 생성하고, components 폴더에 추가하세요. 컴포넌트를 초기화하기 전에 유효한 SpreadJS 라이선스 키를 입력할 수 있습니다.

<template>
<div>
    <gc-spread-sheets :hostClass='hostClass'>
        <gc-worksheet :dataSource="dataTable">
            <gc-column :width="width" :dataField="'preferredFullName'"></gc-column>
            <gc-column :width="width" :dataField="'jobTitleName'"></gc-column>
            <gc-column :width="width" :dataField="'phoneNumber'"></gc-column>
            <gc-column :width="width" :dataField="'region'"></gc-column>
        </gc-worksheet>
    </gc-spread-sheets>
</div>
</template>

<script>
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import {
    GcSpreadSheets,
    GcWorksheet,
    GcColumn
} from '@mescius/spread-sheets-vue'

import * as GC from "@mescius/spread-sheets";

 // SpreadJS 라이선싱
 var SpreadJSKey = "xxx";          // 유효한 라이선스 키를 입력하세요.
 GC.Spread.Sheets.LicenseKey = SpreadJSKey;

export default {
    components: {
        GcSpreadSheets, GcWorksheet, GcColumn
    },
    data() {
        return {
            hostClass: 'spread-host',
            width: 100
        }
    },
    computed: {
        dataTable() {
            return [{
                    "jobTitleName": "Developer",
                    "preferredFullName": "Romin Irani",
                    "region": "CA",
                    "phoneNumber": "408-1234567"
                },
                {
                    "jobTitleName": "Developer",
                    "preferredFullName": "Neil Irani",
                    "region": "CA",
                    "phoneNumber": "408-1111111"
                },
                {
                    "jobTitleName": "Program Directory",
                    "preferredFullName": "Tom Hanks",
                    "region": "CA",
                    "phoneNumber": "408-2222222"
                }
            ];
        }
    }
}
</script>

<style scoped>
.spread-host {
    width: 600px;
    height: 600px;
}
</style>

app.vue 파일의 기본 내용을 아래 코드로 교체하세요.

<template>
<div>
    <h1>
        Adding Spreadsheets to a Jamstack Application
    </h1>
    <p>
        Nuxt.JS v3 + SpreadJS demo
    </p>
    <SpreadSheet />
</div>
</template>

nuxt.config.ts 파일을 아래와 같이 변경하세요:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    ssr: false,
    components: true
})

실행 및 테스트하기

npm run dev 명령어로 애플리케이션을 실행할 수 있습니다.

기본적으로 프로젝트는 http://localhost:3000/ 에서 실행됩니다.

NuxtJS에서 SpreadJS 시작하기

Vue2

Nuxt.js 애플리케이션 생성하기

SpreadJS 설치하기

실행 및 테스트하기

Vue3

Nuxt.js 애플리케이션 생성하기

SpreadJS 설치하기

실행 및 테스트하기

제품

고객 서비스

메시어스 정보

정책(Policy)