Vue CLI 和自訂元件簡介

已完成

雖然在單一 JavaScript 檔案中建立整個 Vue.js 應用程式是可行的，但只有在最小的應用程式中才能進行管理。 為了支援將您的應用程式分解為較小的單位，Vue 可讓您建立元件。 元件是可重複使用的建置組塊，可讓您建立應用程式。

元件可建立為 JavaScript 檔案，或透過副檔名為 .vue 的單一檔案元件來建立。 單一檔案元件會使用瀏覽器無法讀取的特殊語法。 此語法必須轉換成適當的 JavaScript、HTML 和 CSS。 轉換特殊語法使其可供瀏覽器讀取的程序稱為「統合」，需要 webpack 之類的額外工具。

而 Vue 正巧也提供命令列介面 (CLI)，可讓您用來啟動應用程式。 CLI 會設定所有必要的工具，包括搭配程式和程式開發伺服器。

在此課程模組中，我們將會探索如何執行下列作業：

• 使用 Vue CLI 建立應用程式。
• 建立單一檔案元件。
• 使用屬性將值傳入元件。

先決條件：

• 對 Vue.js 的基本了解
• HTML 和 CSS 的知識
• JavaScript 的知識
• 熟悉 Vue.js 指示詞
• Visual Studio Code
• Node.js

注意

若要取得此課程模組的解決方案程式碼，您可以在命令或終端機視窗中執行下列命令以複製存放庫：

git clone https://github.com/MicrosoftDocs/mslearn-vue-components
cd mslearn-vue-components/end
code .