Vue.js

外觀

本頁內容

工具 ​

線上試用 ​

嘗試 Vue SFC 無需在您的機器上安裝任何東西 - 有線上沙箱允許您在瀏覽器中直接進行操作

建議在報告錯誤時也使用這些線上沙箱提供重現

專案腳手架 ​

Vite ​

Vite 是一個輕量級且快速的構建工具，具有一流的 Vue SFC 支援。它由 Vue 的作者 Evan You 建立。

要開始使用 Vite + Vue，只需執行

npm
pnpm
yarn
bun
sh
$ npm create vue@latest

此命令將安裝和執行 create-vue，這是官方 Vue 專案腳手架工具。

  • 要了解更多關於 Vite 的資訊，請檢視 Vite 文件。
  • 要配置 Vite 專案中的 Vue 特定行為，例如向 Vue 編譯器傳遞選項，請檢視 @vitejs/plugin-vue 的文件。

上述提到的所有線上沙箱也支援將檔案作為 Vite 專案下載。

Vue CLI ​

Vue CLI 是 Vue 的官方基於 webpack 的工具鏈。現在它處於維護模式，除非您依賴於特定的僅 webpack 功能，否則我們建議使用 Vite 開始新專案。在大多數情況下，Vite 將提供更優越的開發體驗。

有關從 Vue CLI 遷移到 Vite 的資訊

關於瀏覽器內模板編譯的說明 ​

在沒有構建步驟使用 Vue 的情況下，元件模板可以直接寫入頁面的 HTML 中，或者作為內聯 JavaScript 字串。在這種情況下，Vue 需要將模板編譯器傳送到瀏覽器以執行即時模板編譯。另一方面，如果我們在構建步驟中預先編譯模板，則編譯器就不再需要了。為了減少客戶端包的大小，Vue 提供了針對不同用例最佳化的不同“構建”版本。

  • 以 vue.runtime.* 開頭的構建檔案是 僅執行時構建：它們不包括編譯器。當使用這些構建時，所有模板都必須透過構建步驟預先編譯。

  • 不包含 .runtime 的構建檔案是 完整構建：它們包含編譯器和支援在瀏覽器中直接編譯模板。但是，它們會增加 ~14kb 的負載。

我們的預設工具配置使用僅執行時構建，因為 SFC 中的所有模板都是預編譯的。如果出於某種原因，您需要即使在構建步驟中也需要在瀏覽器中編譯模板，您可以透過配置構建工具將 vue 別名到 vue/dist/vue.esm-bundler.js 來實現。

如果您正在尋找一個用於無需構建步驟的輕量級替代方案，請檢視 petite-vue。

IDE 支援 ​

  • 推薦的 IDE 設定是 VS Code + Vue - 官方擴充套件（之前稱為 Volar）。此擴充套件提供語法高亮、TypeScript 支援和模板表示式以及元件屬性的智慧感知。

    提示

    Vue - 官方擴充套件替換了 Vetur，我們之前為 Vue 2 開發的官方 VS Code 擴充套件。如果您當前已安裝 Vetur，請確保在 Vue 3 專案中停用它。

  • WebStorm 也提供了對 Vue SFCs 的出色內建支援。

  • 其他支援 語言服務協議（LSP）的 IDE 可以透過 LSP 利用 Volar 的核心功能。

瀏覽器開發工具 ​

Vue 瀏覽器開發工具擴充套件允許您探索 Vue 應用的元件樹，檢查單個元件的狀態，跟蹤狀態管理事件，並分析效能。

devtools screenshot

TypeScript ​

主要文章： 使用 TypeScript 與 Vue。

  • Vue - 官方擴充套件 提供了對使用 <script lang="ts"> 塊的 SFC 進行型別檢查，包括模板表示式和跨元件屬性驗證。

  • 使用 vue-tsc 在命令列中執行相同的型別檢查，或為 SFC 生成 d.ts 檔案。

測試 ​

主要文章： 測試指南。

  • 推薦 Cypress 進行端到端測試。它還可以透過 Cypress 元件測試執行器 用於 Vue SFCs 的元件測試。

  • Vitest 是由 Vue / Vite 團隊成員建立的一個專注於速度的測試執行器。它專門為基於 Vite 的應用程式設計，以提供單元/元件測試的相同即時反饋迴圈。

  • Jest 可以透過 vite-jest 與 Vite 一起使用。然而，這僅建議如果您有現有的基於 Jest 的測試套件需要遷移到基於 Vite 的設定，因為 Vitest 提供了類似的功能，但具有更高效的整合。

程式碼風格檢查 ​

Vue 團隊維護著 eslint-plugin-vue，這是一個支援 SFC 特定程式碼風格檢查規則的 ESLint 外掛。

之前使用 Vue CLI 的使用者可能習慣於透過 webpack 載入器配置程式碼風格檢查器。然而，當使用基於 Vite 的構建設定時，我們的建議是

  1. npm install -D eslint eslint-plugin-vue，然後遵循 eslint-plugin-vue 的 配置指南。

  2. 設定 ESLint IDE 擴充套件，例如 VS Code 的 ESLint，以便在開發過程中在您的編輯器中直接獲得程式碼風格檢查反饋。這還可以避免在啟動開發伺服器時產生不必要的程式碼風格檢查開銷。

  3. 在生產構建命令中執行 ESLint，以便在將程式碼部署到生產之前獲得完整的程式碼風格檢查反饋。

  4. （可選）設定如 lint-staged 這樣的工具，以在 git 提交時自動檢查修改過的檔案。

程式碼格式化 ​

  • Vue - Official VS Code 擴充套件為 Vue SFC 提供了開箱即用的格式化功能。

  • 或者，Prettier 提供了內建的 Vue SFC 格式化支援。

SFC 自定義塊整合 ​

自定義塊被編譯成對同一 Vue 檔案的不同請求查詢的匯入。處理這些匯入請求的責任在於底層的構建工具。

  • 如果使用 Vite，應使用自定義 Vite 外掛將匹配的自定義塊轉換為可執行的 JavaScript。 示例

  • 如果使用 Vue CLI 或純 webpack，則應配置 webpack 載入器以轉換匹配的塊。 示例

低階軟體包 ​

@vue/compiler-sfc ​

此軟體包是 Vue 核心單體儲存庫的一部分，並且始終與主 vue 軟體包相同的版本一起釋出。它作為主 vue 軟體包的依賴項包含，並透過 vue/compiler-sfc 代理，因此您無需單獨安裝它。

此軟體包本身提供了處理 Vue SFC 的低階實用工具，僅適用於需要在其自定義工具中支援 Vue SFC 的工具開發者。

提示

始終優先使用透過 vue/compiler-sfc 深度匯入此軟體包，因為這確保了其版本與 Vue 執行時保持同步。

@vitejs/plugin-vue ​

官方外掛，為 Vite 提供 Vue SFC 支援。

vue-loader ​

官方的載入器，用於在webpack中提供Vue SFC支援。如果您使用Vue CLI，請參閱修改Vue CLI中vue-loader選項的文件。

其他線上沙箱 ​

在GitHub上編輯此頁