什么是腳手架

CLI：Command-Line Interface, 翻譯為命令行界面, 但是俗稱腳手架，vue-cli 可以快速搭建Vue開發(fā)環(huán)境以及對應(yīng)的webpack配置

操作步驟

• 要求有node版本要在8.9以上和webpack
• 安裝vue腳手架npm install -g @vue/cli
  如果安裝失敗==>以管路員的身份打開終端，npm clean cache -force
• 檢查版本vue version
• 現(xiàn)在版本是4了，因為要用腳手架2的模板，所以要安裝npm install -g @vue/cli-init
• 腳手架2初始化項目：vue init webpack 文件名
• 腳手架3初始化項目項目：vue create 文件名

• 配置過程（CLI2）
  image.png

• 生成的文件功能解析
  image.png

• CL3文件初始化模板配置

  
  
  image.png

runtimecompiler和runtime-only區(qū)別

• runtimecompiler：template -->抽象語法樹--> render--> 虛擬dom -->UI
• runtime-only:render--> 虛擬dom -->UI(相比于樓上，性能更高，代碼量更少)

cli3如何配置

• 啟動配置服務(wù)器
• 在終端任意目錄下輸入命令vue ui
  導(dǎo)入對應(yīng)的vue文件進(jìn)行管理
  
  image.png
• 關(guān)于在cli3額外添加配置文件
  新建文件
  
  image.png
  
  然后在里面用commom.js進(jìn)行導(dǎo)出，導(dǎo)出的內(nèi)容會和所有的配置信息存在一起

箭頭函數(shù)的this是怎么找

答案： 最近作用域的this（就近原則）一層一層往外找this，碰到箭頭函數(shù)就再往上找

image.png

Vite（node12版本以上）

• 新型前端構(gòu)建工具，能夠顯著提高前端開發(fā)體驗
• 由兩部分組成：一個服務(wù)器，熱替換（HMR）速度快，二是一套構(gòu)建指令

ESBuild為什么這么快呢？

p使用Go語言編寫的，可以直接轉(zhuǎn)換成機(jī)器代碼，而無需經(jīng)過字節(jié)碼；
pESBuild可以充分利用CPU的多內(nèi)核，盡可能讓它們飽和運(yùn)行；
pESBuild的所有內(nèi)容都是從零開始編寫的，而不是使用第三方，所以從一開始就可以考慮各種性能問題；

• 使用方法

  
  
  image.png
  
  

  之后再 npm install 將需要的包都引入進(jìn)來