寫在前面
在vue3剛出來的時候，就去了解vue3相關(guān)語法和使用仔沿。最近恰逢公司某新項目啟動丹诀，搓搓小手，就采用vue3.0去搭建編寫（不過這個項目用的是vue-cli4腳手架生成的項目惧辈，內(nèi)置webpack琳状，所以寫的時候也只能先用webpack）。現(xiàn)在項目進程一半有余盒齿，也踩了很多坑念逞，感悟了vue3函數(shù)編程的魅力困食。不過！這幾天又癡迷于尤大大力推的vite翎承！本著對新技術(shù)的探索和分享精神（哈哈還有蹭Vite的熱度）硕盹，決定整理一篇vite相關(guān)入門和解讀的文章。??
準備工作
1.vue3.0
建議先有一些vue語法知識儲備
在 Vue3.x 是兼容 Vue2.x 的語法的叨咖， Vue2.x 的90%語法能正常在 Vue3.x 中運行
從vue2.x到vue3.x瘩例，這其實是由完全面向?qū)ο驩OP的思路，到函數(shù)式編程的思想轉(zhuǎn)變甸各。
Options API到 Composition API的轉(zhuǎn)變垛贤。（實在不會使用一些語法糖，就將就使用vue2.x的語法吧）
2. vite
vite工具是寫這篇文章的唯一目的痴晦，具體了解可以看看文檔：vue3中文文檔-vite南吮，vite-github
尤大大說Vite是前端下一代打包工具。咱用奧運精神總結(jié)就是：更高誊酌、更快部凑、更強。???
在本文的Vite模塊碧浊，也會加大篇幅解讀Vite相關(guān)的源碼
3.element-plus
文檔地址：Element Plus
Element Plus涂邀，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準備的基于 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.創(chuàng)建項目目錄
cva program-name
或者
create-vite-app app-name
// 轉(zhuǎn)眼間就好了 箱锐，真的很快??
目錄結(jié)構(gòu)：
3. 啟動項目
Vite幫我們生成的目錄結(jié)構(gòu)很簡潔比勉，主要文件和 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 開發(fā)構(gòu)建工具撤卢，由于其原生 ES 模塊導入方法环凿，它允許快速提供代碼。
瀏覽器通過<script module>放吩，為每個導??成HTTP請求, vite的dev服務攔截http請求智听，并把代碼做?些轉(zhuǎn)換之后返回給瀏覽器進?渲染。簡單來說就是 Vite通過node編譯靜態(tài)資源返回給瀏覽器渲染。
5.vite原理是什么：
通過請求內(nèi)容瞭稼，其實我們不難看出端倪忽洛，首先在我們運?npm run dev之后，vite啟動了?個dev server去攔截我們請求的資源?件环肘，所以我們在瀏覽器看到的??實際上是經(jīng)過vite處理后的html?件。
5.1. vite先向html內(nèi)插入代碼
<script type="module">import "/vite/client"</script>
這個部分順便提一句集灌，教大家如何去閱讀源碼吧：
1.按照啟動命令悔雹，去對應的文件夾下面找到入口，如果是自定義的命令欣喧，自己肯定知道入口的腌零，初始化的入口都在node_modules內(nèi)：
2.找到命令的入口，然后順利找到引入的文件cli.js
3.在cli.js內(nèi)唆阿，找到命令后可以看到.action內(nèi)有具體執(zhí)行的函數(shù)塊益涧。這里如果不明白為什么的，可以看看我寫的一個關(guān)于手寫cli的文章 模仿vue-cli驯鳖，手寫一個腳手架闲询，可以解惑。
4.繼續(xù)在cli.js內(nèi)浅辙，找到了runServe函數(shù)的具體位置扭弧，從而可以看到server的入口是server/index.js
5.在server/index.js繼續(xù)閱讀代碼，通過
const serverPluginHtml_1 = require("./serverPluginHtml");知道了下一個我們需要去的位置路徑
6.順利找到插入的具體地方
5.2. client建立了一個sokcet服務
這個client在瀏覽器中啟了?個socket服務续膳，實時的去接受?系列的指令粗俱，根據(jù)指令再去處理響應的邏輯
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 中寫入以下內(nèi)容：
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痰滋！
以上就是自己有關(guān)vite的一點理解，感謝閱讀续崖，覺得vite部分說的不錯有收獲的話可以點個贊哈哈敲街。
后續(xù)在公司項目結(jié)束后，可能會整理開發(fā)時vue3和element-plus的相關(guān)分享严望。
