[]
SpreadJS는 VueJS 기반 웹 앱 개발 프레임워크인 NuxtJS를 지원합니다. NuxtJS는 개발을 쉽고 빠르며 체계적으로 만들어 줍니다. NuxtJS는 React.js 프레임워크인 NextJS와 매우 유사합니다. NuxtJS의 주요 기능으로는 폴더 구조, 서버 사이드 렌더링(SSR), 정적 렌더링, 코드 분할 등이 있습니다.
자세한 내용은 https://nuxtjs.org/docs/get-started/installation 를 참고하세요.
이 튜토리얼에서는 SpreadJS를 사용하는 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 패키지를 설치하세요.
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/에서 실행됩니다.
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 패키지를 설치합니다.
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/ 에서 실행됩니다.