在 Create Vue 中使用

SpreadJS 支持在 Create Vue 开发环境时使用单独的模块和插件一起使用。

使用模块与插件

包含以下步骤：

1. 创建一个创建Vue项目

   打开命令提示符窗口并键入以下命令来创建一个简单的create Vue项目。

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

2. 在项目中安装SpreadJS模块和插件

   使用以下命令安装 SpreadJS NPM 模块和插件：

   npm install @grapecity/spread-common @grapecity/spread-calc-engine @grapecity/spread-sheets-core @grapecity/spread-sheets-calc-engine @grapecity/spread-sheets-bindings @grapecity/spread-sheets-print @grapecity/spread-sheets-vue tiny-emitter

3. 在创建 Vue 应用程序中使用 SpreadJS

   使用下面给出的代码修改 main.js 文件：

   import '../node_modules/@grapecity/spread-common/styles/gc.spread.sheets.excel2016colorful.css';
   import { createApp } from 'vue'
   import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/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 "@grapecity/spread-common";
     import "@grapecity/spread-sheets-core";
     import "@grapecity/spread-calc-engine";
     import "@grapecity/spread-sheets-calc-engine";
     import "@grapecity/spread-sheets-bindings";
     import "@grapecity/spread-sheets-print";
     import { ref } from "vue";
     import "@grapecity/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: {
               "@grapecity/spread-sheets": require.resolve("@grapecity/spread-common")
         }
      }
   })

4. 保存并运行应用程序

   npm run dev