練習 - 使用 Vue.js 建立應用程式

5 分鐘

在本單元中，您會使用 HTML 檔案來建立入門 Vue 應用程式。檔案會連結至 Vue 核心程式庫，以及包含應用程式詳細資料的外部 JavaScript 檔案。您會定義一個 Vue 資料變數，並在 HTML 網頁內以動態方式顯示。

複製起始存放庫

應用程式的入門網站包含影像和基底樣式。先複製存放庫，然後在 Visual Studio Code 中加以開啟。

在終端機或命令視窗中，執行下列命令。

git clone https://github.com/MicrosoftDocs/mslearn-vue-get-started/
cd mslearn-vue-get-started/start
code .

連結至 HTML 檔案中的 Vue 核心程式庫

您會從內容傳遞網路 (CDN) 來安裝 Vue.js。

在 Visual Studio Code 中，開啟 index.html。
連結至 Vue 核心程式庫來安裝 Vue.js。在入門 index.html 檔案的 TODO: Import Vue.js core library 註解下方，貼上下列指令碼標籤。
```

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```

為您的 Vue 應用程式建立 JavaScript 檔案

您可以視需要在 HTML 檔案內開始撰寫 Vue 指令碼。但您通常可以將程式碼放在不同的 JavaScript 檔案中，更清楚地管理您的應用程式。

建立名為 index.js 的新檔案。

將下列程式碼新增至 index.js，以建立應用程式。

const app = Vue.createApp({
    data() {
        return {
            productName: 'Book a Cruise to the Moon',
            productDescription: 'Cruise to the moon in our luxurious shuttle. Watch the astronauts working outside the International Space Station.',
            // additional properties later


        }
    },
});

您可以使用 createApp() 函式，因為您已將 Vue.js 程式庫匯入 HTML 網頁的 <head> 標籤中。然後，您要傳遞此函式的引數做為具有 data 屬性的物件。這個物件會傳回另一個您用來儲存資料的物件。

匯入和裝載應用程式

現在您已建立 JavaScript 程式碼，可以匯入和裝載應用程式。

返回 index.html。

在 TODO: Import Vue app 註解下方，新增下列指令碼。

<script src="./index.js"></script>
<script>
    app.mount('#app');
</script>

使用 Vue 應用程式

現在您已建立並匯入 Vue 應用程式，可以建立資訊顯示。

在 index.html 檔案的 TODO: Add information display 註解下方，新增下列 HTML。

<div id="app">
    <h2>{{ productName }}</h2>
    <div>{{ productDescription }}</div>
</div>

重要

網頁順序對 Vue.js 處理而言很重要。在完全載入 HTML 網頁之前，您無法將應用程式附加至文件物件模型 (DOM)。因此，在所有其他 HTML 元素載入瀏覽器之後，請在網頁底部匯入 Vue 應用程式。通常最好先讓 HTML 網頁載入，然後再呼叫要變更 DOM 內容或結構的外部指令檔。

使用 Live Server 開啟網頁

Visual Studio Code 的 Live Server 擴充功能會建立開發 Web 伺服器，其會在偵測到變更時自動重新整理網頁。若要安裝延伸模組，請遵循上述連結。然後使用其裝載您的網頁。

儲存所有檔案。
選取 Ctrl+Shift+P，在 Visual Studio Code 中開啟命令選擇區。在 Mac 上，請選取 Cmd+Shift+P。
輸入 Live Server: Open with Live Server。

在開啟的對話方塊中，您會看到網頁現在裝載於 http://localhost:5500 上。
開啟瀏覽器並移至至 http://localhost:5500。

您應該會看到您建立的網頁！

顯示新建立網頁的螢幕擷取畫面。