Vue，Vite 以及 Vite 的 vue 插件三者之间的关系

一，Vue

Vue 是提供一套规则和语法，基于这套规则语法去编写网页，这个网页的最终呈现的效果，就会是我们在基于 vue 的语法编写网页时所期待的效果。

以数据双向绑定为例，对于开发人员而言，我编写一个展示数字的页面，我仅需将这个存储数字的变量绑定到页面上的对应位置，这样当我的变量发生变化，页面也会自动渲染，对开发者而言，这是编写的时候就清楚的最终的网页会呈现的效果，事实上是 vue 在这个过程中提供了相当于编译器的支持，因为浏览器是无法处理 vue 的语法的，因此这些效果在实际变为供用户浏览的 web 页面时，是需要转换成基于最基础的 js，html 来实现相应的效果的一些文件。

在这个过程里，Vue 既提供了面向开发者的语法规定，如数据绑定这样的语法，也提供了将这样的代码转换为真的能符合期待中的效果的底层实现，

二，Vite

vite 是一个前端项目搭建，测试，构建的工具，它能够在开发阶段为我们提供支持，如快速启动服务器，实时监听项目文件的变更并同步到客户端，因此开发网页时更改了文件或一些显示效果，就能在浏览器中实时的看到变动

对于普通的 web 服务器而言是没有这个效果的，因为浏览器请求服务器获取到了网页后，对于不包含实现自动更新的 js 代码的网页而言，除非使用了什么其它技术或者主动刷新浏览器页面，否则服务器变动的页面内容是不会更新到浏览器的

而且这个自动更新变动的能力不仅针对 html，js，css 文件（vite 自带对常见内容的更新实现），通过插件功能，vite 能够更新更多的特殊文件，典型的就是 vue 文件，对于 vue 文件的处理，要如何转换成 html 文件，以及发生变动后要如何通知客户端更新哪些内容，这些具体实现都在 Vite 的 Vue 文件里，这样，当项目里改动了某个 js 或 html，vite 会自动分析相应的依赖关系并更新客户端的相关文件，而对于 vue 文件的变动，vite 则会将其交给 vue 插件处理。

更准确的说，vite 会监听项目文件夹内文件的变动，并根据变动更新打包的网页，同时也通知浏览器更新相应页面。
以上内容基于以下几点认知

• 项目在开发阶段存在一个目录结构和依赖关系，包含许多未使用到的 js 文件或 css 文件
• 项目最终要打包成一个浓缩且紧凑的版本（打包），形成一个包含 html，js，css 以及资源文件的文件夹，里面的 js 代压缩了所有的依赖，以此文件夹作为生成版本的服务器运行
  因此对开发者而言这个过程是被一定程度上隐藏了的，就像在学 c 语言的时候，我们面对着代码编辑窗口，编写好代码，点击运行就会弹出一个黑窗口运行出结果，我相信这个时候多数人会有一种我们的代码运行好了的朴素认知，而对于刚刚转瞬间发生的事情，可能会觉得代码刚刚在一步一步的往前运行每一条语句，这里的抽象层次也就仅仅到语句而已，事实上点击往按钮，我们的代码需要经过预处理，编译，链接等程序，哪怕到最后的运行阶段，也存在着被 windows 的程序装载器载入内存这样的步骤，其实整个过程是相当复杂的。

三，Vite 的 Vue 插件

针对 Vite 开发的插件，相当于扩展了 Vite 的能力，使其能够打包 vue 文件，也能够检测并处理 vue 文件的变更并更新