Vite 是随着 Vue3 一起发布的一款新型前端构建工具，能够显著的提升前端开发体验，它主要由两部分组成：
（1）一个开发服务器，它基于**原生ES模块提供了丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
（2）一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的 插件API和 JavaScript API带来了高度的可扩展性，并有完整的类型支持。
Vite 最初发行时，仅能用来构建 Vue3 项目，但随着随用群体的不断扩大，目前能支持构建的项目越来越多，已经包含了以下几种项目模板：
我们可以看到，目前已经支持了 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/spreadjs/gc-sjs-samples/index.html
评论