Create Vue에서 SpreadJS 시작하기

SpreadJS는 Create Vue 개발 환경에서 개별 모듈과 플러그인을 함께 사용하는 것을 지원합니다.

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

이는 다음 단계를 포함합니다:

1. Create Vue 프로젝트 생성

   명령 프롬프트 창을 열고 다음 명령어를 입력하여 간단한 Vue 프로젝트를 생성하세요.

   npm create vue@3
   cd vue-project
   npm install
   npm run dev

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-bindings @mescius/spread-sheets-print @mescius/spread-sheets-vue tiny-emitter

3. Create Vue 애플리케이션에서 SpreadJS 사용하기

   아래 코드를 사용하여 main.js 파일을 수정하세요:

   import '../node_modules/@mescius/spread-common/styles/gc.spread.sheets.excel2016colorful.css';
   import { createApp } from 'vue'
   import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/spread-sheets-vue'
   import App from './App.vue'
   let app = createApp(App);
   app.component('gc-column', GcColumn);
   app.component('gc-spread-sheets', GcSpreadSheets);
   app.component('gc-worksheet', GcWorksheet);
   app.mount('#app');

   아래 코드를 사용하여 App.vue 파일을 수정하세요:

   <template>
   <div id="sample-tutorial">
       <gc-spread-sheets hostClass="sample-spreadsheets" @workbookInitialized="initSpread">
          <gc-worksheet>
                   <gc-column>  </gc-column>
           </gc-worksheet>
        </gc-spread-sheets>
   </div>
   </template>
   <script setup>
     import "@mescius/spread-common";
     import "@mescius/spread-sheets-core";
     import "@mescius/spread-calc-engine";
     import "@mescius/spread-sheets-calc-engine";
     import "@mescius/spread-sheets-bindings";
     import "@mescius/spread-sheets-print";
     import { ref } from "vue";
     import "@mescius/spread-sheets-vue";
     const spreadRef = ref(null);
     const initSpread = (spread) => {
      spreadRef.value = spread;
      let sheet = spread.getActiveSheet();
      sheet.setValue(0, 0, "Hello SpreadJS");
      sheet.setColumnCount(20);
      spread.print();
    }
   </script>
   <style scoped>
     #app {
      height: 300px;
      width: 100%;
   }
   #sample-tutorial {
    position: relative;
    height: 300px;
    width: 100%;
    overflow: hidden;
   }
   .sample-spreadsheets {
    height: 300px;
    width: 100%;}
   body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    }
   </style>

   다음 코드를 사용하여 vite.config.js 파일을 수정하세요:

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   // https://vitejs.dev/config/export default defineConfig({
      plugins: [
         vue(),
      ],
      resolve: {
         alias: {
               "@mescius/spread-sheets": require.resolve("@mescius/spread-common")
         }
      }
   })

4. 애플리케이션을 저장하고 실행하기

   npm run dev