关键词：
今天，葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。
在正式开始项目介绍之前，首先咱们首先来介绍一下Vite和Vue3。
Vue3
2020年09月18日Vue.js 3.0发布，经历了两年时间的对细节的不断优化与调整，终于在今年2月正式成为新的默认版本。其作者尤雨溪将Vue3的目标描述为：
1、更快
2、更小
3、更易于维护
4、原生目标更容易
5、开发更轻松
只看上述内容，你可能感受不到Vue3究竟优化了什么。这里我们将它和Vue2来对比一下，为大家具体说明它的优越之处。
性能的提升
在官方文档中针对Vue2和Vue3之间的性能差异有具体的数据介绍：
1、SSR速度提高了2~3倍
2、Update性能提高1.3~2倍
其中性能提升的重要一点是Vue3中对diff算法进行了优化。
在Vue2中，每当数据发生变化，就会生成一个新的DOM树，并新DOM树与旧的DOM树进行对比，来判断节点异同，并进行更新。但完整遍历过程需要将两棵树所有节点进行比较，但实际情况中并不是所有节点内容都会变化，这就造成了性能的浪费。
Vue3新增了静态标记，仅对标记了的节点进行对比并进一步更新，无需再遍历整个节点，实现了性能提升。
组合式API
Vue2使用选项型API（Options API），这种方式下将代码分割为不同的属性：data、computed、methods 等，这些方法属性各司其职。
举个例子，当我们想实现一个列表视图功能，需要在data中写此功能相关的数据，在methods中写相关的逻辑判断和后端交互方法等；如果还希望有搜索和筛选，或者更多的功能，那么逻辑关注点会越来越多，导致组件变得难以理解和维护。（下图为示例组件）
组合式API（Composition API）正是为了解决原本Vue2项目中代码逻辑分散、不易理解和维护的问题。它使用方法（function）进行代码分割，使代码更为简洁。
生命周期函数变更
与Vue2相比，Vue3中生命周期函数也发生了变更，总结如下：
有需要的同学可以截图保存，以备不时之需。
按需打包模块
在Vue项目中有众多API和模块，但在一个项目中我们并不会用到全部内容， Vue3的按需打包模块，可以大幅度压缩打包后的内容体积。
根据官网对比示例，Vue2中如果仅写了Hello Word，未用到任何模块API，打包后大小约为32KB；而Vue3同理，打包后大小约为13.5KB，可以明显看出升级后的Vue3相较于Vue2打包体积大幅减小。
说完了Vue3的改进，接下来我们来看看Vite又有什么亮眼之处。
Vite
在Vue3正式发布之前，尤雨溪就提到做了一个新的前端构建工具-Vite。其本人更是对Vite青睐有加，引得Webpack开发者直喊大哥：
Vite究竟有什么样的魔力呢？它做到了本地快速开发启动：
- 快速冷启动，而不需要等待打包操作
- 即时的模块热更新
- 真正的按需编译，不用等待整个项目编译完成、
在使用Webpack时，会经历分析依赖 => 编译打包 => 交给开发服务器渲染 整个过程。也就是说，需要先打包，之后将打包结果提供给服务器进行加载。特别是随着模块的不断增多，打包的体积越来越大，造成热更新速度明显拖慢。
而Vite直接略过了打包步骤，直接启动开发服务器，请求具体的模块时再对该模块进行实时编译，大大提高了启动速度。
尤雨溪本人也在微博发言解释了其原理：“Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。”
（Vite具体的实现原理可参考文章：https://juejin.cn/post/6844904136299790349）
到这里我们已经详细为大家介绍了Vue3升级的亮眼功能和Vite的优势，在下部分中我们会以项目实例出发，为大家介绍如何如何开发一款基于 Vite+Vue3 的在线表格系统。
感兴趣的小伙伴们不要错过~
如何开发一款基于vite+vue3的在线表格系统（上）
今天，葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。在正式开始项目介绍之前，首先咱们首先来介绍一下Vite和Vue3。Vue3Vue是什么？大多前端开发者对这个词已毫不陌生了。三大框架孰优孰劣，众... 查看详情
如何开发一款基于vite+vue3的在线表格系统（上）
今天，葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。在正式开始项目介绍之前，首先咱们首先来介绍一下Vite和Vue3。Vue3Vue是什么？大多前端开发者对这个词已毫不陌生了。三大框架孰优孰劣，众... 查看详情
如何开发一款基于vite+vue3的在线表格系统（下）(代码片段)
在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容。在本篇中我们将从项目实战出发带大家了解Vite+Vue3的在线表格系统的构建。使用Vite初始化Vue3项目在这里需要注意：根据官网文档说明，使用Vite需要node版... 查看详情
如何开发一款基于vite+vue3的在线表格系统（下）(代码片段)
在上篇内容中我们为大家分享了详细介绍Vue3和Vite的相关内容。在本篇中我们将从项目实战出发带大家了解Vite+Vue3的在线表格系统的构建。使用Vite初始化Vue3项目在这里需要注意：根据官网文档说明，使用Vite需要node版... 查看详情
如何开发一款在线excel表格系统（上）
今天，葡萄带你了解如何基于Vite+Vue3实现一套纯前端在线表格系统。在正式开始项目介绍之前，首先咱们首先来介绍一下Vite和Vue3。Vue32020年09月18日Vue.js3.0发布，经历了两年时间的对细节的不断优化与调整，终于在今年2月正式成... 查看详情
基于vite+react构建在线excel(代码片段)
...一起发布的一款新型前端构建工具，能够显著的提升前端开发体验，它主要由两部分组成：（1）一个开发服务器，它基于原生**ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（****HMR）。（2）一套构建指令，它使... 查看详情
基于vite+react构建在线excel(代码片段)
...发布的一款新型前端构建工具，能够显著的提升前端开发体验，它主要由两部分组成：（1）一个开发服务器，它基于**原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。&... 查看详情
基于vite+react构建在线excel(代码片段)
...发布的一款新型前端构建工具，能够显著的提升前端开发体验，它主要由两部分组成：（1）一个开发服务器，它基于**原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。&... 查看详情
基于最新vite+vue3+vantui移动端应用项目搭建(代码片段)
Vite是vue的作者尤雨溪在开发vue3.0的时候开发的一个基于原生ES-Module的前端构建工具。其本人在后来对vue3的宣传中对自己的新作品Vite赞不绝口，并表示自己”再也回不去webpack了“。这里记录下使用最新的Vite+vue3和有赞出... 查看详情
vue3项目搭建教程（基于create-vue，vite，vite+vue）(代码片段)
...版本。详细教程可参阅下面链接文章：Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）https://blog.csdn.net/weixin_69553582/article/details/129584587二、通过create 查看详情
vite开发快速入门
...的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。1.1Vite组成Vite构建... 查看详情
vue3+vite本地开发配置proxy(代码片段)
...te（官方的自然是最好的），那么在vite中应该如何配置后端的路由转发呢？ 上网找了一大圈，大部分都是说，在vite.config.js里面直接配置proxy即可。 例如：误人子弟1 但实际... 查看详情
uniapp对于vue3语法支持不太好
...升级，是一个渐进式过程：2020年9月：小程序平台支持vue3开发，小程序平台编译器依然使用webpack；2021年5月：H5平台支持vue3开发，H5平台编译器升级为Vite；2021年8月：App平台支持vue3开发，App平台编译器升级为Vite；2021年11月：小... 查看详情
vite-admin后台管理系统|vite4+vue3+pinia前端后台框架实例(代码片段)
...时间分享了一篇vue3自研pc端UI组件库VEPlus。这次带来最新开发的基于vite4+vue3+pinia技术栈搭配ve-plus组件库构建的中后台权限管理系统框架。支持vue-i18n国际化多语言、动态路由鉴权、4种布局模板及tab页面缓存等功能。技术栈编码... 查看详情
vue3+vite本地开发配置proxy(代码片段)
...已经面世一段时间了，所以这次就打算基于Vue3来进行开发前端。因为项目也比较赶，所以就没有完整熟读Vue3的文档，而是一来就上手，用脚手架先开一个项目，有什么不懂的，再查。这不，准备和后... 查看详情
vue3+vite本地开发配置proxy(代码片段)
...已经面世一段时间了，所以这次就打算基于Vue3来进行开发前端。因为项目也比较赶，所以就没有完整熟读Vue3的文档，而是一来就上手，用脚手架先开一个项目，有什么不懂的，再查。这不，准备和后... 查看详情
使用vite和typescript带你从零打造一个属于自己的vue3组件库
...n等等。但是作为一个前端开发者，你知道一个UI组件库是如何被打造出来的吗?读完这篇文章你将学会:如何使用pnpm搭建出一个Monorepo环境如何使用vite搭建一个基本的Vue3脚手架项目如何开发调试一个自己的UI组件库如何使用vite打... 查看详情
基于vue3viteantdvcss变量实现在线主题色切换
...、项目创建根据vite官方文档,使用社区模板,即可轻松创建基于vue3和ts的项目模板npminitvite@latest复制代码然后按照提示,依次选择vue、vue-ts,即可创建vue3+ts+vite项目2、eslint和prettier配置安装依赖yarnaddeslinteslint-config-prettiereslin... 查看详情