寫在前面
在vue3剛出來的時候，就去了解vue3相關語法和使用。最近恰逢公司某新項目啟動，搓搓小手，就采用vue3.0去搭建編寫（不過這個項目用的是vue-cli4腳手架生成的項目，內置webpack，所以寫的時候也只能先用webpack）?，F在項目進程一半有余，也踩了很多坑，感悟了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是前端下一代打包工具。咱用奧運精神總結就是：更高、更快、更強。???
在本文的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
// 轉眼間就好了 ，真的很快??
目錄結構：
3. 啟動項目
Vite幫我們生成的目錄結構很簡潔，主要文件和 vue-cli 的文件都是一樣的，但是對比 vue-cli 新建的新項目的webpack啟動，Vite啟動真的很快了，甚至說啟動時間可以忽略不計了????????
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編譯靜態資源返回給瀏覽器渲染。
5.vite原理是什么：
通過請求內容，其實我們不難看出端倪，首先在我們運?npm run dev之后，vite啟動了?個dev server去攔截我們請求的資源?件，所以我們在瀏覽器看到的??實際上是經過vite處理后的html?件。
5.1. vite先向html內插入代碼
<script type="module">import "/vite/client"</script>
這個部分順便提一句，教大家如何去閱讀源碼吧：
1.按照啟動命令，去對應的文件夾下面找到入口，如果是自定義的命令，自己肯定知道入口的，初始化的入口都在node_modules內：
2.找到命令的入口，然后順利找到引入的文件cli.js
3.在cli.js內，找到命令后可以看到.action內有具體執行的函數塊。這里如果不明白為什么的，可以看看我寫的一個關于手寫cli的文章 模仿vue-cli，手寫一個腳手架，可以解惑。
4.繼續在cli.js內，找到了runServe函數的具體位置，從而可以看到server的入口是server/index.js
5.在server/index.js繼續閱讀代碼，通過
const serverPluginHtml_1 = require("./serverPluginHtml");知道了下一個我們需要去的位置路徑
6.順利找到插入的具體地方
5.2. client建立了一個sokcet服務
這個client在瀏覽器中啟了?個socket服務，實時的去接受?系列的指令，根據指令再去處理響應的邏輯
connected: socket 連接成功
vue-reload: 組件重新加載
vue-rerender: 組件重新渲染
style-update: 樣式更新
style-remove: 樣式移除
js-update: js ?件更新
full-reload: ??重刷新
例如保存代碼熱更新后，組件重新加載
直接上源碼解讀，同樣，在圖6的代碼處可以看到熱更新模塊和client模塊
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服務所提供的熱更新以及組件刷新邏輯的驗證。
驗證成功，ok！
以上就是自己有關vite的一點理解，感謝閱讀，覺得vite部分說的不錯有收獲的話可以點個贊哈哈。
后續在公司項目結束后，可能會整理開發時vue3和element-plus的相關分享。
