什么是腳手架
CLI：Command-Line Interface, 翻譯為命令行界面, 但是俗稱腳手架察迟，vue-cli 可以快速搭建Vue開(kāi)發(fā)環(huán)境以及對(duì)應(yīng)的webpack配置
操作步驟
- 要求有node版本要在8.9以上和webpack
- 安裝vue腳手架
npm install -g @vue/cli
如果安裝失敗==>以管路員的身份打開(kāi)終端，npm clean cache -force - 檢查版本
vue version - 現(xiàn)在版本是4了，因?yàn)橐媚_手架2的模板狂窑，所以要安裝
npm install -g @vue/cli-init - 腳手架2初始化項(xiàng)目：
vue init webpack 文件名 - 腳手架3初始化項(xiàng)目項(xiàng)目：
vue create 文件名 -
配置過(guò)程（CLI2）image.png
-
生成的文件功能解析image.png
-
CL3文件初始化模板配置
image.png
runtimecompiler和runtime-only區(qū)別
-
runtimecompiler：template -->抽象語(yǔ)法樹(shù)--> render--> 虛擬dom -->UI -
runtime-only:render--> 虛擬dom -->UI(相比于樓上，性能更高，代碼量更少)
cli3如何配置
- 啟動(dòng)配置服務(wù)器
- 在終端任意目錄下輸入命令
vue ui
導(dǎo)入對(duì)應(yīng)的vue文件進(jìn)行管理
image.png - 關(guān)于在cli3額外添加配置文件
新建文件
image.png
然后在里面用commom.js進(jìn)行導(dǎo)出，導(dǎo)出的內(nèi)容會(huì)和所有的配置信息存在一起
箭頭函數(shù)的this是怎么找
答案： 最近作用域的this（就近原則）一層一層往外找this莺琳，碰到箭頭函數(shù)就再往上找
image.png
Vite（node12版本以上）
- 新型前端構(gòu)建工具，能夠顯著提高前端開(kāi)發(fā)體驗(yàn)
- 由兩部分組成：一個(gè)服務(wù)器载慈，熱替換（HMR）速度快惭等，二是一套構(gòu)建指令
ESBuild為什么這么快呢？
p使用Go語(yǔ)言編寫的办铡，可以直接轉(zhuǎn)換成機(jī)器代碼辞做，而無(wú)需經(jīng)過(guò)字節(jié)碼；
pESBuild可以充分利用CPU的多內(nèi)核寡具，盡可能讓它們飽和運(yùn)行秤茅；
pESBuild的所有內(nèi)容都是從零開(kāi)始編寫的，而不是使用第三方晒杈，所以從一開(kāi)始就可以考慮各種性能問(wèn)題；
-
使用方法
image.png
之后再 npm install 將需要的包都引入進(jìn)來(lái)
