Nuxt.js

SpreadJS は、Vue.jsのフレームワークであるNuxt.jsをサポートしています。 Nuxt.jsを使用すると、開発を簡単、かつ迅速にすることができます。 Nuxt.jsは、React.js のフレームワークである Next.jsとよく似ています。

詳細については、https://nuxtjs.org/ja/docs/get-started/installation/ を参照してください。

このチュートリアルでは、SpreadJS を使用する Nuxt.js アプリケーションを作成します。

Vue3

Nuxt.jsアプリを作成する

Nuxt.js アプリケーションを簡単に作成するには、Create Next Appツールを使用します。

1. コマンドプロンプトまたはターミナルで次のコマンドを実行して、Nuxt.jsプロジェクトを作成します。

   npx nuxi init nuxt3WithSJS

   
   

2. 次のコマンドを実行します。

   cd nuxt3WithSJS

   npm install

   npm run dev

   
   

3. ブラウザで次のリンクを開きます。Nuxt.jsの公式ページが表示されます。

   http://localhost:3000/

   
   

4. 現在のターミナルを閉じて、Visual Studio Code（または他のIDE）を使用して nuxtjs-with-spreadjs フォルダを開きます。

SpreadJSをインストールする

1. SpreadJSパッケージ、および日本語リソースをインストールします。

   npm install @grapecity/spread-sheets-vue@xx.x.x

   npm install @grapecity/spread-sheets-resources-ja@xx.x.x

   type=warning

   'xx.x.x'の部分には製品のバージョンを指定してください。バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

   
   

2. アプリケーションのルートフォルダに、「components」フォルダを作成します（componentsフォルダが存在しない場合のみ）。

   
   

3. Vueコンポーネントファイル（ファイル名：SpreadSheet.vue）を「components」フォルダに追加し、次のコードを入力します。

   <template>
     <div>
       <gc-spread-sheets class="hostClass" @workbookInitialized="initSpread">
         <gc-worksheet> </gc-worksheet>
       </gc-spread-sheets>
     </div>
   </template>
   
   <script setup>
   import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
   import { GcSpreadSheets, GcWorksheet } from "@grapecity/spread-sheets-vue";
   import * as GC from "@grapecity/spread-sheets";
   import '@grapecity/spread-sheets-resources-ja';
   
   // カルチャ設定
   GC.Spread.Common.CultureManager.culture('ja-jp');
   
   var data = [
     {
       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",
     },
   ];
   let initSpread = function (spread) {
     var sheet = spread.getSheet(0);
     sheet.setDataSource(data);
   };
   </script>
   <style scoped>
   .hostClass {
     width: 600px;
     height: 600px;
   }
   </style>

4. app.vue ファイルの内容を次のコードに変更します。

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

5. 以下のように nuxt.config.ts ファイルを変更します。

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

アプリを実行する

npm run dev コマンドを使用してアプリケーションを実行します。デフォルトでは、プロジェクトは http://localhost:3000/ で実行されます。