在 NuxtJS 中使用 SpreadJS

SpreadJS 支持 NuxtJS，这是一个用于创建 Web 应用程序的 VueJS 框架。

NuxtJS 使开发变得简单、快速和有条理。NuxtJS 与 React.js 的框架 NextJS 非常相似。NuxtJS 的一些有用特性是文件夹结构、服务器端呈现、静态呈现和代码拆分。

有关详细信息，请参阅https://nuxtjs.org/docs/get-started/installation。

在本教程中，我们构建了一个使用 SpreadJS 的Nuxt.js应用程序。

视图 2

创建 Nuxt.js 应用程序

创建 Nuxt.js 应用程序的最简单方法是使用 Create Next App 工具。

从命令提示符或终端运行以下命令以创建 Nuxt.js 项目。

npx create-nuxt-app nuxt2WithSJS

当终端提示配置信息时，选择需要的选项并回车确认。在终端安装并创建项目时稍等片刻。它会问你几个问题，以下是你可以使用的答案：

Project language: JavaScript
Project manager: Npm
UI framework: None
Template engine: HTML
Nuxt.js modules: Axios
Linting tools: ESLint
Testing framework: None
Rendering mode: Single Page App
Deployment target: Static
Development tools: jsconfig.json
Continuous integration: None
Version control system: Git

在终端中键入以下命令。
```
cd nuxt2WithSJS
npm run dev
```
使用浏览器打开以下链接。然后你会看到NextJS的欢迎页面。
http://localhost:3000/
关闭当前终端。使用 Visual Studio Code 或 IDE 打开 nextjs-with-spreadjs 文件夹。

安装 SpreadJS

安装 SpreadJS 包。
```
npm install --save @grapecity-software/spread-sheets-vue
```
创建一个名为 components 的文件夹，如果它不存在于应用程序的根文件夹中。

创建一个 JavaScript XML 文件 SpreadSheet.vue 并将其添加到组件文件夹中，并在其中添加以下代码。

<template>
<div>
    <gc-spread-sheets :hostClass='hostClass'>
        <gc-worksheet :dataSource="dataTable">
            <gc-column :width="width" :dataField="'preferredFullName'"></gc-column>
            <gc-column :width="width" :dataField="'jobTitleName'"></gc-column>
            <gc-column :width="width" :dataField="'phoneNumber'"></gc-column>
            <gc-column :width="width" :dataField="'region'"></gc-column>
        </gc-worksheet>
    </gc-spread-sheets>
</div>
</template>

<script>
import '@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
import '@grapecity-software/spread-sheets-vue'

export default {
    data() {
        return {
            hostClass: 'spread-host',
            width: 100
        }
    },
    computed: {
        dataTable() {
            return [{
                    "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"
                }
            ];
        }
    }
}
</script>

<style scoped>
.spread-host {
    width: 600px;
    height: 600px;
}
</style>

更改索引文件内容。用以下代码替换 pages\index.tsx 文件的默认内容。

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

运行和测试应用程序

您可以使用 npm run dev 命令运行该应用程序。默认情况下，该项目在 http://localhost:3000/ 运行。

视图 3