Vite是一款与Vue3一起发布的全新前端构建工具，可以显着提升前端开发体验。它主要由两部分组成：(1)开发服务器，它基于*NativeES模块，提供丰富的内置功能，例如惊人的快速热模块更新(*HMR)。(2)一组使用Rollup打包你的代码的构建指令，它被预配置为生产环境输出高度优化的静态资源。Vite旨在提供开箱即用的配置，而其插件API和JavaScriptAPI带来了高度的可扩展性和完整的类型支持。Vite刚发布时，只能用于构建Vue3项目。不过随着社区的不断扩大，可以搭建的项目越来越多，包括以下项目模板：.对于一个经常使用React开发项目的程序员来说，之前一直在使用create-react-app构建react应用，觉得问题不大。刚开始用Vite的时候，本葡萄有点怀疑，因为毕竟Vite是和Vue3一起发布的。对于用户来说，潜意识里会觉得它更适合Vue；但是真正用过之后，你才会发现Vite的构建速度，不是看名字就知道的。下面我们使用Vite创建一个基于React的在线Excel项目。实际项目兼容性提示：Vite要求Node.js版本>=12.0.0。但是，某些模板需要更高版本的Node才能正常运行。当您的包管理器警告您时，请升级您的Node.js版本。我们可以通过以下命令快速创建一个react-ts项目。如果当前项目不想使用ts，只需要在--template后面更改预制模板即可react。#npm6.xvite-react-ts表示项目名称，可以自行更改npmcreatevite@latestvite-react-ts--templatereact-ts#npm7+，需要额外的双横线：npm创建vite@latestvite-react-ts----templatereact-ts#yarnyarn创建vitevite-react-ts--templatereact-ts#pnpmpnpm创建vite-react-ts--templatereact-tsViewcreate-vite可以获得其他模板的更多细节：vanilla,vanilla-ts,vue,vue-ts,react,react-ts,preact,preact-ts,lit,lit-ts,svelte,svelte-ts。创建一个react-ts项目只需要7.813秒，这是很多项目望尘莫及的。接下来，我们可以按照终端中的提示，先进入项目目录，然后执行npminstall。安装完成后，npmrundev就可以启动了。如果这个阶段有什么安装问题，可以为搜索引擎解决。一般来说，你需要指定另一个安装镜像。默认情况下，项目在端口3000上启动。打开后显示如上图所示。至此，我们已经使用Vite创建了一个React项目。接下来需要介绍一个纯前端表格控件来搭建在线Excel。要使用它，首先要引入组件相关的资源。我们可以在package.json中添加如下内容："dependencies":{"react":"^18.0.0","react-dom":"^18.0.0","@grapecity/spread-sheets":"15.0.7","@grapecity/spread-sheets-react":"15.0.7","@grapecity/spread-excelio":"15.0.7","@grapecity/spread-sheets-charts":"15.0.7","@grapecity/spread-sheets-print":"15.0.7","@grapecity/spread-sheets-pdf":"15.0.7","@grapecity/spread-sheets-barcode":"15.0.7","@grapecity/spread-sheets-shapes":"15.0.7","@grapecity/spread-sheets-resources-ko":"15.0.7","@grapecity/spread-sheets-resources-ja":"15.0.7","@grapecity/spread-sheets-resources-zh":"15.0.7","@grapecity/spread-sheets-languagepackages":"15.0.7","@grapecity/spread-sheets-pivot-addon":"15.0.7","@grapecity/spread-sheets-designer":"15.0.7","@grapecity/spread-sheets-designer-resources-cn":"15.0.7","@grapecity/spread-sheets-designer-react":"15.0.7","@grapecity/spread-sheets-tablesheet":"15.0.7"},添加完成后，再次进入当前项目目录，执行npminstall，完成新添加资源的安装，导入完成后，删除项目中不需要的东西，让页面看起来更干净。然后在src下新建一个components文件夹，用来存放我们后面写的表格组件，在components文件夹document下新建一个OnlineDesigner.tsx。接下来需要在OnlineDesigner.tsx文件中引入SpreadJS相关资源，并编写表格组件。详细代码如下：sheets.excel2013white.css"import'@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'import"@grapecity/spread-sheets-tablesheet";import"@grapecity/spread-床单条形码”；导入“@grapecity/spread-sheets-charts”；导入“@grapecity/spread-sheets-shapes”；导入“@grapecity/spread-sheets-languagepackages”；导入“@grapecity/spread-sheets-打印”；导入“@grapecity/spread-sheets-pdf”；导入“@grapecity/spread-sheets-pivot-addon”；导入“@grapecity/spread-sheets-resources-zh”；导入“@grapecity/spread-sheets-designer-resources-cn";import*asGCDesignerfrom'@grapecity/spread-sheets-designer';import"@grapecity/spread-sheets-resources-zh"从"@grapecity/spread-sheets"导入GCculture('zh-cn')interfaceProps{}interfaceState{}导出默认类OnlineDesignerextendsComponent
