大前端學習筆記--Vue.js 3.0

文章內容輸出來源：大前端高薪訓練營

一、Vue.js 源碼組織方式

1. 源碼采用TypeScript重寫

提高了代碼的可維護性。大型項目的開發都推薦使用類型化的語言，在編碼的過程中檢查類型的問題。

2. 使用Monorepo管理項目結構

使用一個項目管理多個包，把不同功能的代碼放到不同的package中管理，每個功能模塊都可以單獨發布，單獨測試，單獨使用。

3. 不同構建版本

Vue3中不再構建UMD模塊化的方式，因為UMD會讓代碼有更多的冗余，它要支持多種模塊化的方式。Vue3中將CJS、ESModule和自執行函數的方式分別打包到了不同的文件中。在packages/vue中有Vue3的不同構建版本。

cjs（兩個版本都是完整版，包含編譯器）

vue.cjs.js

vue.cjs.prod.js（開發版，代碼進行了壓縮）

global（這四個版本都可以在瀏覽器中直接通過scripts標簽導入，導入之后會增加一個全局的Vue對象）

vue.global.js（完整版，包含編譯器和運行時）

vue.global.prod.js（完整版，包含編譯器和運行時，這是開發版本，代碼進行了壓縮）

vue.runtime.global.js

vue.runtime.global.prod.js

browser（四個版本都包含esm，瀏覽器的原生模塊化方式，可以直接通過

支持模塊的script默認延遲加載

有了type="module"的模塊是延遲加載的，類似于script標簽設置defer

在文檔解析完成后，也就是DOM樹生成之后，觸發DOMContentLoaded事件前執行

2. Vite as Vue-CLI

Vite 在開發模式下不需要打包可以直接運行

Vue-CLI開發模式下必須對項目打包才可以運行

Vite在生產環境下使用Rollup打包

基于ES Module的方式打包

Vue-CLI使用Webpack打包

3. Vite特點

快速冷啟動

按需編譯

模塊熱更新

4. Vite創建項目

Vite創建項目

npm init vite-app cd npm install npm run dev

1

2

3

4

基于模板創建項目

npm init vite-app --template react npm init vite-app --template preact

1

2

JavaScript Vue web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。