Vue

SpreadJS では、Vue 開発環境にて、個別のモジュールとプラグインの両方の使用をサポートされます。

モジュールとプラグインをの使用

次の手順を実行します。

Vue プロジェクトを作成する
Vue プロジェクトを作成するには、コマンドプロンプトウィンドウを開き、次のコマンドを入力します。
```
npm create vue@3
cd vue-project
npm install
npm run dev
```

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

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")
      }
   }
})

アプリを保存して実行します。
```
npm run dev
```