写在前面
在vue3刚出来的时候，就去了解vue3相关语法和使用。最近恰逢公司某新项目启动，搓搓小手，就采用vue3.0去搭建编写（不过这个项目用的是vue-cli4脚手架生成的项目，内置webpack，所以写的时候也只能先用webpack）。现在项目进程一半有余，也踩了很多坑，感悟了vue3函数编程的魅力。不过！这几天又痴迷于尤大大力推的vite！本着对新技术的探索和分享精神（哈哈还有蹭Vite的热度），决定整理一篇vite相关入门和解读的文章。🤩
准备工作
1.vue3.0
建议先有一些vue语法知识储备
在 Vue3.x 是兼容 Vue2.x 的语法的， Vue2.x 的90%语法能正常在 Vue3.x 中运行
从vue2.x到vue3.x，这其实是由完全面向对象OOP的思路，到函数式编程的思想转变。
Options API到 Composition API的转变。（实在不会使用一些语法糖，就将就使用vue2.x的语法吧）
2. vite
vite工具是写这篇文章的唯一目的，具体了解可以看看文档：vue3中文文档-vite，vite-github
尤大大说Vite是前端下一代打包工具。咱用奥运精神总结就是：更高、更快、更强。️️️
image.png
在本文的Vite模块，也会加大篇幅解读Vite相关的源码
3.element-plus
文档地址：Element Plus
Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
开始
1.全局安装 create-vite-app
yarn global add create-vite-app@1.18.0
或者
npm i -g create-vite-app@1.18.0
2.创建项目目录
cva program-name
或者
create-vite-app app-name
// 转眼间就好了 ，真的很快🤣
create-vite-app.png
目录结构：
目录结构.png
3. 启动项目
Vite帮我们生成的目录结构很简洁，主要文件和 vue-cli 的文件都是一样的，但是对比 vue-cli 新建的新项目的webpack启动，Vite启动真的很快了，甚至说启动时间可以忽略不计了🤔🤔🤔🤔
启动项目.png
启动效果.png
4. vite帮我们做了什么事
好家伙，启动速度快到我根本看不见就好了，所以去代码扒一扒，vite偷偷做了哪些事情：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
/src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
其实就是index.html中引⼊了src/main.js， main.js 引⼊App.vue并挂载到html中，很好理解的一个流程，打开浏览器组件也确实渲染出来了。
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。
浏览器通过<script module>，为每个导⼊⽣成HTTP请求, vite的dev服务拦截http请求，并把代码做⼀些转换之后返回给浏览器进⾏渲染。简单来说就是 Vite通过node编译静态资源返回给浏览器渲染。
http请求.png
5.vite原理是什么：
通过请求内容，其实我们不难看出端倪，首先在我们运⾏npm run dev之后，vite启动了⼀个dev server去拦截我们请求的资源⽂件，所以我们在浏览器看到的⻚⾯实际上是经过vite处理后的html⽂件。
5.1. vite先向html内插入代码
<script type="module">import "/vite/client"</script>
image.png
这个部分顺便提一句，教大家如何去阅读源码吧：
1.按照启动命令，去对应的文件夹下面找到入口，如果是自定义的命令，自己肯定知道入口的，初始化的入口都在node_modules内：
图1.png
2.找到命令的入口，然后顺利找到引入的文件cli.js
图2.png
3.在cli.js内，找到命令后可以看到.action内有具体执行的函数块。这里如果不明白为什么的，可以看看我写的一个关于手写cli的文章 模仿vue-cli，手写一个脚手架，可以解惑。
图3.png
4.继续在cli.js内，找到了runServe函数的具体位置，从而可以看到server的入口是server/index.js
图4.png
5.在server/index.js继续阅读代码，通过
const serverPluginHtml_1 = require("./serverPluginHtml");知道了下一个我们需要去的位置路径
图5.png
6.顺利找到插入的具体地方
图6.png
5.2. client建立了一个sokcet服务
image.png
这个client在浏览器中启了⼀个socket服务，实时的去接受⼀系列的指令，根据指令再去处理响应的逻辑
connected: socket 连接成功
vue-reload: 组件重新加载
vue-rerender: 组件重新渲染
style-update: 样式更新
style-remove: 样式移除
js-update: js ⽂件更新
full-reload: ⽹⻚重刷新
例如保存代码热更新后，组件重新加载
image.png
直接上源码解读，同样，在图6的代码处可以看到热更新模块和client模块
图7.png
图8.png
图9.png
6.element-plus
快速上手：element-plus,
npm install element-plus --save
在 main.js 中写入以下内容：
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
去hello-world组件尝试使用：写一个el-button，保存。
同时在控制台可以看到跟上面解读vite源码时，client服务所提供的热更新以及组件刷新逻辑的验证。
image.png
image.png
验证成功，ok！
image.png
以上就是自己有关vite的一点理解，感谢阅读，觉得vite部分说的不错有收获的话可以点个赞哈哈。
后续在公司项目结束后，可能会整理开发时vue3和element-plus的相关分享。
网友评论