首先先介紹一下vite，vite這個名字起源於法語就是很快的意思。應為他是冷服務不打包 用es6 import 來引入對應 的js。其次就是使用rollup 去打包。開發中有熱更新等。

vite為何如此快

------------ESBuild解析---------
ESBuild的特點
超快的構建速度 不需要緩存
支持ES6和commonjs模塊化
支持Es6的Tree-shaking
支持GO， javascript的api
支持typescript和jsx等語法的編譯
支持sourceMao
支持代碼壓縮
支持拓展其他插件
EsBuild的構建速度是 rollup+terser webpack parcel的幾百倍
esbuild為什麼這麼快 ：因為是使用go語言編寫的 直接轉換為機器碼 無需經過字節碼 機器碼直接在操作系統上執行
js代碼執行： 代碼–>解析轉換為asd樹–>字節碼—>讀取字節碼–>在對字節碼進行轉換
會合理運用cup內核 儘可能飽和運行
esbuild所有的內容都是從0開始編寫的 而不是使用的第三方 一開始就考慮到各種性能問題
-------------------------vite依賴了esbuild所以編譯代碼速度很快------------------

vite腳手架

在開發中 不可能所有的項目都是使用 vite從0開始去搭建的 比如 react vue
這時候 vite還提供了對應的腳手架工具
vite實際上有2個工具
1： vite:相當於一個構建工具 類似於webpack rollup
2：
@vitejs/create-app：類似於vue-cli create-react-app
使用腳手架工具
1: 這個做法省去了安裝腳手架的過程
cnpm init @vitejs/app //此寫法廢棄了
npm create vite@latest//新寫法
2:
2-1安裝腳手架
cnpm i @vitejs/create-app -g
2-2創建項目
create-app name(自己的項目名字)
報錯：@vitejs/create-app is deprecated, use npm init vite instead @不推薦使用vitejs/create-app，請改用npm-init-vite
這使用腳手架工具2種寫法都別在考慮了

vite 是跨框架的不止是安裝vue3(vue2)還可以安裝react等

正式開始 vite中文文檔

1.創建一個vite 項目
第一步
創建命令 （棄用 npm init @vitejs/app <項目名稱> 該命令報錯）
使用npm

npm init vite@latest

使用yarn

yarn create vite

使用pnpm

pnpm create vite

第二步 切換到目錄 cd project

第三步 安裝依賴包 npm install | yarn

第四步 啓動項目 npm run dev | yarn dev

2…vite項目 使用TypeScript

和css使用less/sass一致 添加lang

<script lang="ts"></script>

3.vite項目使用less sass scss

npm install less less-loader -D
npm install sass node-sass sass-loader -D

使用yarn

yarn add less less-loader
yarn add sass sass-loader node-sass

<style lang="less"  scoped>
.box{
  color:red,
  .box_top{
      text-align:center
	}
}
</style>

4 vite 一些bug

我們創建一個vite.config.js

新增一個別名 發現有報錯

解決方案。方案如下