Vite的使用
- 瀏覽器支持esMoudle的弊端
- Vite的安裝和基本使用
- Vite對CSS、Less、postcss的支持
- Vite對ts的支持
- Vite服務器原理
- Vite對Vue的支持和預打包處理
- Vite的打包和預覽程序
- Vite依賴ESBuild的學習
- Vite的腳手架使用
瀏覽器支持esMoudle的弊端
script標簽需要加入type="module"- 而且我們引入第三方包，我們只用了其中的一點點代碼，但是瀏覽器還是會請求其相關沒有用到的js檔案
- 當我們有使用TypeScript，less時，瀏覽器不能識別，
- 引入檔案時，必須定位到確定的檔案，且后綴不能省略，
Vite的安裝和基本使用
安裝：npm install vite -D 可全域安裝也可區域安裝，我演示時使用的是區域安裝
使用： npx vite
我們得提供一個index.html的檔案，不然無法請求到，
此時我們引入其他包時可以不用具體到某個檔案，引入js檔案可以不寫后綴，
Vite對CSS、Less、postcss的支持
-
vite是自動支持css的
-
vite對less的支持
- 需安裝less
npm install less -Dvite會自動呼叫的，我們只要安裝， - 然后將寫的less檔案依賴參考進頁面就可以了，就行了
- 需安裝less
-
vite對postcss的支持
- 我們只需要安裝postcss
npm install postcss -D - 但是我們還是得安裝其他插件或者預設，才能起效果，插件或者預設安裝看前面文章
- postcss組態檔和前面文章一樣，vite一樣會自動呼叫
- 我們只需要安裝postcss
Vite對ts的支持
默認是直接支持的，我們不需要安裝什么，和配置什么
Vite服務器原理
Vite對Vue的支持和預打包處理
安裝
-
npm install vue@next -
vite對vue3單檔案組件的支持
npm install @vitejs/plugin-vue -D -
npm install @vue/compiler-sfc -D
配置 vite.config.js
Vite的打包和預覽程序
打包npx vite build
預覽npx vite preview
Vite依賴ESBuild的學習
優點
- 支持TypeScript等語法
- 支持 ES6、CommonJS的模塊化
- 打包構建速度快
- 支持javaScript的API語法
- 支持代碼壓縮
- 擴展插件
- Vite可以進行 Tree Sharking
Vite的腳手架使用
同時安裝vite和腳手架npm init @vitejs/app
- 分開安裝
安裝：npm install @vitejs/create-app -g
使用：create-app 專案名稱
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/287936.html
標籤：其他
上一篇：C++教程