如何基于vite+vue3开发在线表单系统（二）

在上一篇文章中，我们为大家分享了Vue3和Vite的详细介绍。本文将从实际项目出发，为大家介绍Vite+Vue3的在线表单系统的搭建。这里使用Vite初始化Vue3项目需要注意：根据官网文档，使用Vite需要node版本为12以上。创建项目前请检查节点版本。初始化项目命令：$npminitvite-app//（project-name为项目名称）创建vite项目脚手架包$cd//进入项目目录$npminstall//安装项目所需依赖$npmrundev//启动项目为例：为myVue3构建一个名为project的项目。执行命令：npmintitvite-appmyVue3，可以看到在Practice文件夹下已经构建了一个工程。项目结构如下：执行命令：cdmyVue3进入项目目录，执行命令：npminstall安装相关模块。工程结构如下：模块下载成功。最后执行命令：npmrundev启动项目，输入地址。当我们看到这个页面，就说明项目已经成功启动了。伏笔已经准备好了，废话不多说，开始吧。项目实战了解了Vue3和Vite之后，我们就用一个实际的项目来体验一下。思路：使用SpreadJS和组件化表格编辑器做一个简单的在线Excel填表系统。其中，A页面使用编辑器进行模板设计并保存。B页面使用SpreadJS导入模板并填写上传。实现机制是SpreadJS的数据绑定功能。大家可以先通过下面的链接了解它的功能https://demo.grapecity.com.cn...主要代码如下：首先安装需要的模块"dependencies":{"vue":"^3.0.4","@grapecity/spread-sheets-designer-vue":"15.1.0","@grapecity/spread-sheets-designer":"15.1.0","@grapecity/spread-sheets-designer-resources-cn":"15.1.0","@grapecity/spread-sheets":"15.1.0","@grapecity/spread-sheets-resources-zh":"15.1.0","@grapecity/spread-excelio":"15.1.0","@grapecity/spread-sheets-barcode":"15.1.0","@grapecity/spread-sheets-charts":"15.1.0","@grapecity/spread-sheets-语言包”：“15.1.0”，“@grapecity/spread-sheets-print”：“15.1.0”，“@grapecity/spread-sheets-pdf”：“15.1.0”，“@grapecity/spread-sheets-sh猿”：“15.1.0”，“@grapecity/spread-sheets-tablesheet”：“15.1.0”，“@grapecity/spread-sheets-pivot-addon”：“15.1.0”，“@grapecity/spread-sheets-vue":"15.1.0","@types/file-saver":"^2.0.1","vue-router":"^4.0.0-rc.5"}运行命令npminstall安装所有依赖的项目接下来我们来配置路由1.在src文件夹下新建一个文件。router/index.js2、执行路径由配置import{createRouter,createWebHistory}from"vue-router";constroutes=[{path:"/",name:"Designer",component:()=>import("../views/Designer.vue"),},{路径:"/spreadSheet",名称:"SpreadSheet",组件:()=>import("../views/SpreadSheet.vue"),}];exportconstrouter=createRouter({history:createWebHistory(),routes:routes});3、在main.js中导入import{createApp}from'vue'import{router}from'./router/index'importAppfrom'./App.vue'import'./index.css'constapp=createApp(App)app.use(router);app.mount('#app')4、修改App.vue<script>exportdefault{name:'App',components:{}}细心的朋友可能已经注意到路由配置和main.js导入方式好像和vue2的使用不一样？是的，在vue3中使用VueRouter时，需要导入新的方法（比如createRouter和createWebHistory）才能正常使用。同时代码也体现了vue3组合API的特点。与vue2的optionAPI（将代码分为数据、方法等）相比，vue3在setup方法内部定义了数据和方法，将业务逻辑抽取成函数，通过return返回，使代码逻辑更加简洁明了。配置好路由后，我们开始集成组件化表格编辑器（Designer）和SpreadJS。一、集合设计师代码如下所示：1.在模板中添加一个div，这个div是设计器的容器，可以使用css设置容器的宽高和位置，即自定义设计器的显示尺寸和位置。2.导入设计器需要的依赖。3.在setup函数中初始化设计器。如下图所示，网页已经加载并显示了设计器，说明设计器已经成功集成到本项目中。设计器页面类似于Excel，我们可以通过工具栏提供的UI按钮和独特的数据绑定功能轻松实现模板设计。当然你也可以直接通过导入按钮或者使用接口（fromJSON）加载预设模板。完成模板设计后，点击保存按钮提交。这里我们先将数据保存到sessionStorage中，以供后面获取。注意：本机设计器不包含保存按钮。我们可以利用其强大的定制能力，根据业务需求执行相关的代码逻辑。保存按钮的代码逻辑如下图所示：自定义组件完整代码请参考文末demo。再一一介绍。Designer的集成和模板设计都完成了，下面我们来看看如何集成前端表单控件和填写采集数据。2.集成类似于集成Designer。首先，创建一个名为SpreadSheet的vue页面。1.在模板中添加一个div，这个div是为展布容器，可以通过css设置容器的宽高和位置，即自定义展布的显示大小和位置2.添加导入模板，绑定数据源和保存按钮。3.导入本组件需要的依赖。4.在setup方法中初始化spread。5.实现每个按钮对应的代码逻辑。importTemplate方法使用fromJSON方法加载Designer设计的模板。SetDataSource使用数据绑定功能绑定预设的数据源，也可以自行修改或手动填写报表。在saveTemplate方法中获取修改/填充的数据源，可以将数据源保存到后台数据库（本例保存到sessionStorage，仅作为示例）。后期填写报表和汇总时可以直接从后台数据库中读取数据源。至此，一个简单的在线Excel填表系统就完成了。有兴趣的小伙伴可以下载下面的项目代码自行试用。https://gcdn.grapecity.com.cn...如果您对更多示例感兴趣，可以查看：https://demo.grapecity.com.cn...