Vite是随着Vue3一起公布的一款新型前端构建工具，可能显著的晋升前端开发体验，它次要由两局部组成：
（1）一个开发服务器，它基于*原生ES模块提供了丰盛的内建性能，如速度快到惊人的 模块热更新（*HMR）。
（2）一套构建指令，它应用 Rollup 打包你的代码，并且它是预配置的，可输入用于生产环境的高度优化过的动态资源。
Vite意在提供开箱即用的配置，同时它的 插件API和 JavaScript API带来了高度的可扩展性，并有残缺的类型反对。
Vite最后发行时，仅能用来构建Vue3我的项目，但随着随用群体的不断扩大，目前能反对构建的我的项目越来越多，曾经蕴含了以下几种我的项目模板：
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
咱们能够看到，目前曾经反对了react以及react-ts模板。对于一个经常性应用React开发我的项目的程序媛来说，之前始终应用的时create-react-app来构建react利用，也没有感觉有太大的问题。最开始要应用到Vite时，本葡萄的心田还是有点疑虑的，因为毕竟Vite是跟着Vue3公布的，对于使用者而言，潜意识会感觉它和Vue更加适配；但在实际上手用了之后，才会发现Vite的搭建速度，不亏于它的名字。
接下来咱们就是一起入手用Vite来创立一个基于React的在线Excel我的项目吧。
我的项目实战
兼容性提醒：Vite 须要 Node.js 版本 >= 12.0.0。然而，有些模板须要依赖更高的Node 版本能力失常运行，当你的包管理器收回正告时，请留神降级你的Node 版本。
咱们能够通过以下命令，疾速的创立一个react-ts的我的项目，如果以后我的项目并不想应用ts的话，只须要将--template后的预制模板改为react即可。
# npm 6.x vite-react-ts示意我的项目名，能够本人轻易改一个npm create vite@latest vite-react-ts --template react-ts# npm 7+, extra double-dash is needed:npm create vite@latest vite-react-ts -- --template react-ts# yarnyarn create vite vite-react-ts--template react-ts# pnpmpnpm create vite vite-react-ts-- --template react-ts查看 create-vite 能够获取其它模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。
创立一个react-ts我的项目仅需7.813秒，这速度曾经让很多我的项目可望不可即了。接下来咱们既能够依照终端中的提醒，先进入到我的项目目录下，之后执行npm install，装置实现后npm run dev就能够启动了。这个阶段如果有任何装置问题，能够面向搜索引擎解决，一般来说，须要指定一个其它的装置镜像。
我的项目默认启动在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" },增加实现后，再次进入到以后我的项目目录下，执行npm install，实现新增加资源的装置。当然，大家在引入时，能够当初npm上查找一下SpreadJS目前最新的版本，去引入最新版本的产品。
引入实现后，将我的项目中不须要应用的货色删一删，让页面看起来洁净一点。之后在src下新建components文件夹，用来寄存之后咱们写的表格组件。components文件夹下新建OnlineDesigner.tsx文件。接下来咱们就须要在OnlineDesigner.tsx文件中去引入SpreadJS相干资源，编写表格组件，具体代码如下：
import { Component, PropsWithChildren, ReactNode } from 'react'import '@grapecity/spread-sheets-designer-resources-cn';import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'import "@grapecity/spread-sheets-tablesheet";import "@grapecity/spread-sheets-barcode";import "@grapecity/spread-sheets-charts";import "@grapecity/spread-sheets-shapes";import "@grapecity/spread-sheets-languagepackages";import "@grapecity/spread-sheets-print";import "@grapecity/spread-sheets-pdf";import "@grapecity/spread-sheets-pivot-addon";import "@grapecity/spread-sheets-resources-zh";import "@grapecity/spread-sheets-designer-resources-cn";import * as GCDesigner from '@grapecity/spread-sheets-designer';import "@grapecity/spread-sheets-resources-zh"import GC from "@grapecity/spread-sheets"import { Designer } from '@grapecity/spread-sheets-designer-react';GC.Spread.Common.CultureManager.culture('zh-cn')interface Props{}interface State{} export default class OnlineDesigner extends Component<Props, State>{ designer: null | GCDesigner.Spread.Sheets.Designer.Designer; constructor(props: Props){ super(props) this.designer = null } designerInitialized = (designer: GCDesigner.Spread.Sheets.Designer.Designer) => { this.designer = designer console.log(designer) // 获取与designer相关联的工作簿(Spread) let spread:GC.Spread.Sheets.Workbook = this.designer.getWorkbook() as GC.Spread.Sheets.Workbook // 获取以后流动工作表 let sheet:GC.Spread.Sheets.Worksheet = spread.getActiveSheet() as GC.Spread.Sheets.Worksheet //设置数值 sheet.setValue(0,0,'Hello Grapecity') //设置行高 sheet.setColumnWidth(0,120) //设置区域内容 sheet.setArray(1,0,[[2,3,5]]) //设置公式 sheet.setFormula(3,0,'=sum(A2:C2)') } render(): ReactNode { return( <Designer spreadOptions={{sheetCount: 3}} styleInfo={{height: '98vh'}} designerInitialized = {this.designerInitialized} /> ) }}接下来，咱们须要在app.tsx中引入本人定义的OnlineDesigner组件即可，具体代码为：
import './App.css'import OnlineDesigner from './components/OnlineDesigner'function App() { return ( <div className="App"> <OnlineDesigner/> </div> )}export default App最初，咱们来看看显示成果吧
通过以上几步操作，你就能够领有一个在线的Excel零碎辣~
文内demo下载地址：https://gcdn.grapecity.com.cn/forum.php?mod=attachment&aid=MjE3NDQzfDIwNTI5YzgwfDE2NTU5NjI3OTR8NjI2NzZ8OTk3MTg%3D
理解更多实例：https://demo.grapecity.com.cn...