[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

Vite에서 SpreadJS 시작하기

Vite는 React, Vue 등 여러 프레임워크용 프로젝트를 빠르게 시작할 수 있는 빌드 도구입니다. SpreadJS는 Vite 개발 환경에서 개별 모듈과 플러그인을 함께 사용하는 것을 지원합니다.

모듈과 플러그인 함께 사용하기

다음 단계들을 포함합니다:

  1. 명령 프롬프트 창을 열고 다음 명령어를 입력하여 Vite 개발 환경을 구성합니다.

    npm create vite@latest

    그런 다음 다음 옵션들을 선택합니다.

    √ Project name: ... vite-project
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript

    다음 명령어로 프로젝트를 시작합니다.

    cd vite-project
npm install
npm run dev

    Vite를 사용하여 프로젝트를 만드는 방법에 대한 자세한 내용은 Vite를 참고하세요.

  2. 프로젝트에 SpreadJS 모듈과 플러그인을 설치합니다.

    다음 명령어로 SpreadJS NPM 모듈과 플러그인을 설치합니다:

    npm install @mescius/spread-common @mescius/spread-calc-engine @mescius/spread-sheets-core @mescius/spread-sheets-calc-engine @mescius/spread-sheets-print

  3. main.ts 파일을 다음 코드로 업데이트합니다:

    import * as GC from "@mescius/spread-common";
import "@mescius/spread-calc-engine";
import "@mescius/spread-sheets-core";
import "@mescius/spread-sheets-calc-engine";
import "@mescius/spread-sheets-print";
let spread = new GC.Spread.Sheets.Workbook("ss");
let sheet = spread.getActiveSheet();
sheet.setValue(0, 0, "Hello SpreadJS");
spread.print();

  4. index.html 파일을 다음 코드로 업데이트합니다:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + TS</title>
    <link rel="stylesheet" type="text/css" href="../node_modules/@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css" />
  </head>
  <body>
    <div id="ss" style="width: 100%;height:300px;"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

  5. vite-project 폴더에 다음 코드를 포함한 vite.config.js 파일을 추가합니다:

    import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({  
resolve: {   
alias: {      
'@mescius/spread-sheets': fileURLToPath(new URL('./node_modules/@mescius/spread-common', import.meta.url))    
} 
}
})