Vite是随着Vue3一起发布的一款新型前端构建工具,能够显著的提升前端开发体验,它主要由两部分组成:

(1)一个开发服务器,它基于**原生ES模块提供了丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。

(2)一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。

Vite意在提供开箱即用的配置,同时它的 插件APIJavaScript 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 # yarn
yarn create vite vite-react-ts--template react-ts # pnpm
pnpm 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

基于Vite+React构建在线Excel的更多相关文章

  1. 基于webpack+react+antd 项目构建

    工欲善其事必先利其器,学习React也是如此. 下面分享一篇基于webpack+react+antd 项目构建的好文章, https://blog.hduzplus.xyz/articles/2017 ...

  2. 用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱

    前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...

  3. React构建单页应用方法与实例

    React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM.JSX等.那么接下来我们就来学习一下这门框架 ...

  4. 基于vue-cli快速构建

    基于vue-cli快速构建 https://www.jianshu.com/p/2769efeaa10a   Vue是近两年来比较火的一个前端框架(渐进式框架吧),与reactjs和angularjs ...

  5. 基于laravel框架构建最小内容管理系统

    校园失物招领平台开发 --基于laravel框架构建最小内容管理系统 摘要 ​ 针对目前大学校园人口密度大.人群活动频繁.师生学习生活等物品容易遗失的基本现状,在分析传统失物招领过程中的工作效率低下. ...

  6. 基于spring reactor3构建的即时通讯api。

    欢迎阅读Rmessage文档 技术栈 Rmessage是采用Reactor3,基于reactor-netty项目构建的实时消息推送api. 什么是Reactor3? Reactor 是一个用于JVM的 ...

  7. 基于Abp React前端的项目建立与运行——React框架分析

    基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 ...

  8. 基于vue2.0的在线电影APP,

    基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...

  9. 基于CkEditor实现.net在线开发之路(7)列表页面开发动作介绍

    一个列表页面不止是查询,它也包含了很多业务上功能的实现,这些业务功能的实现的逻辑我称之为动作.如触发单击按钮删除数据,更改业务表数据,调用webService,调用WCF接口,弹出新窗体新增.修改.查 ...

  10. 基于Dubbo框架构建分布式服务(一)

    Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配 ...

随机推荐

  1. Spring中bean的scope

    Spring容器中的bean具备不同的scope,最开始只有singleton和prototype,但是在2.0之后,又引入了三种类型:request.session和global session,不 ...

  2. OSG-3.4.0 简要说明(Readme)

    欢迎来到OpenSceneGraph(OSG)世界. Welcome to the OpenSceneGraph (OSG). 对于项目最新信息, 以及如何编译和运行库和示例的更多细节, 可以查看OS ...

  3. 最短路&lt;dijk&gt;

    题意: 有n个城市,有m条路,给出每条路的出发和结束的城市及长度,求从第一个城市到最后一个城市的最短路.按格式输出. power oj 2443 题解: 标准dijk算法. #include<c ...

  4. Entity Framework快速入门--ModelFirst

    Entity Framework带给我们的不仅仅是操作上的方便,而且使用上也很是考虑了用户的友好交互,EF4.0与vs2010的完美融合也是我们选择它的一个理由吧.相比Nhibernate微软这方面做 ...

  5. LVS负载均衡原理

    一.LVS基本原理概述 LB集群的实现,LB即负载均衡集群 硬件:F5 BIG-IP,Citrix NetScaler,A10,Array,Redware 软件:Lvs,nginx,haproxy,a ...

  6. Android Studio 去除上方标题

    选中代码再Ctrl+shift+'/' 可加/***/注释 https://blog.csdn.net/wuqingsen1/article/details/78554117 styles.xml & ...

  7. 1.3if判断语句+while和for循环语句+购物车作业

    1.if 语句 if userame=_usename and password=_password: print("welcome user {name} login..."). ...

  8. python set 集合复习--点滴

    一.set特性: set是一个无序不重复的元素集合. 集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键.集合支持用in和not in操作符检查成员,由len()内建函数得到集合的基数(大小 ...

  9. scatter

    一.matplotlib.pyplot.scatter用来画散点图 import matplotlib.pyplot as plt import matplotlib as mpl mpl.rcPar ...

  10. python里面的数学

    一.基本运算符 1.算数运算 2.比较运算 特殊情况:!= 不等于 新版本不支持 <> 不等号 3.赋值运算 4.逻辑运算 not : 非   非真即假,非假即真.   - and : 并 ...