Vue 的擴充套件
使用 *.vue 檔案來構建我們的 Vue 專案是有意義的，因為
- 它使得處理大型專案更加容易，透過使用模板和元件。
- 我們可以透過 https 協議檢視和測試我們的專案，就像使用者將看到頁面一樣。
- 儲存更改後，頁面會立即更新，無需重新載入。
- 這就是真實 Vue 網頁的構建方式。
- 這就是開發人員的工作方式。
為什麼？
正如我們在上一頁關於 Vue 模板和元件的內容中看到的，現在有必要採用一種不同的工作方式，因為我們想要
- 擁有更大的專案
- 將所有 Vue 相關程式碼集中到一個地方
- 在 Vue 中使用元件（我們很快就會講到）
- 在編輯器中獲得語法高亮和自動補全支援
- 自動更新瀏覽器
為了實現這一切，我們必須切換到 *.vue 檔案。
如何實現？
SFC（Single File Components），或 *.vue 檔案，更容易使用，但不能直接在瀏覽器中執行，所以我們需要在計算機上設定一個環境來編譯我們的 *.vue 檔案為 *.html, *.css 和 *.js 檔案，以便瀏覽器能夠執行我們的 Vue 應用程式。
要基於 SFC 構建我們的網頁，我們使用一個名為 Vite 的工具作為構建工具，並在 VS Code 編輯器中編寫程式碼，使用 Volar 擴充套件來支援 Vue 3 的語言特性。
設定
按照下面的三個步驟來安裝執行 Vue SFC 應用程式所需的一切。
-
“VS Code” 編輯器
有很多不同的編輯器可用於 Vue 專案。我們使用的是 VS Code 編輯器。請 下載 VS Code 並安裝它。
-
VS Code 的“Volar”擴充套件
要在編輯器中為 *.vue 檔案獲得語法高亮和自動補全，請開啟 VS Code，在左側導航欄中選擇“Extensions”。搜尋“Volar”並安裝下載量最多且描述為“Language support for Vue 3”的擴充套件。
-
Node.js
下載並安裝最新版本的 Node.js，因為 Vue 的構建工具“Vite”執行在此之上。
Node.js 是一個開源的伺服器端 JavaScript 執行時環境。
建立預設示例專案
按照下面的步驟在您的計算機上建立預設的 Vue 示例專案。
-
在您的計算機上為您的 Vue 專案建立一個資料夾。
-
在 VS Code 中，透過選單選擇 Terminal -> New Terminal 來開啟一個終端。
-
使用終端導航到您剛剛建立的 Vue 資料夾，使用類似
cd <folder-name>、cd ..、ls(Mac/Linux) 和dir(Windows) 的命令。如果您不熟悉在終端中輸入命令，請參閱我們關於命令列介面 (CLI) 的介紹 此處。
-
在終端中導航到您的 Vue 資料夾後，輸入
npm init vue@latest
-
建立您的第一個專案，專案名稱為“firstsfc”。
-
在所有選項中選擇“No”。
-
現在您的終端應該顯示以下內容：
-
我們現在將執行上面建議的命令。
執行此命令將目錄更改到 'firstsfc' 資料夾內的新專案。
cd firstsfc
-
安裝所有必需的依賴項，以便 Vue 專案能夠正常工作。
npm install
-
啟動開發伺服器
npm run dev
-
終端視窗現在應該看起來像這樣：
您的瀏覽器應該會自動開啟示例專案。
如果無法在瀏覽器中找到示例專案，請使用終端中的連結。您在終端視窗中找到的連結可能與上圖中的地址不同。
現在，示例專案正在您的機器上以開發模式執行，由 Vite 構建工具提供支援。
專案檔案
自動建立的示例專案包含許多檔案，我們將快速瀏覽其中的一些。
main.js
在 VS Code 編輯器中找到您的 Vue 專案，然後在“src”資料夾中找到“main.js”檔案。
“main.js”告訴 Vite 如何基於“App.vue”檔案構建 Vue 專案。這類似於我們之前使用 script 標籤提供 CDN 連結來告訴瀏覽器如何執行我們的 Vue 程式碼，以及如何將 Vue 例項掛載到 <div id="app"> 標籤。
App.vue
在同一個示例專案資料夾中，找到“App.vue”檔案並開啟它。與所有其他 *.vue 檔案一樣，“App.vue”包含三個部分：一個 <script> 部分，一個 <template> 部分和一個 <style> 部分。
App.vue:
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
正如您在“App.vue”的 script 部分中看到的，其中引用了其他 *.vue 檔案：這些是 'components'，位於 'components' 資料夾中。如果您檢視 'App.vue' 檔案的 'template' 部分，您可以看到不是標準 HTML 標籤的標籤：<HelloWorld> 和 <TheWelcome>。這就是元件的引用方式。元件就像應用程式內部的應用程式。我們很快就會學到更多關於元件的知識。
