快速入門 ​

線上嘗試 Vue ​

• 要快速體驗 Vue，您可以直接在我們的 Playground 中嘗試。

• 如果您更喜歡一個沒有構建步驟的純 HTML 設定，您可以使用這個 JSFiddle 作為起點。

• 如果您已經熟悉 Node.js 和構建工具的概念，您還可以在 StackBlitz 上嘗試一個完整的構建設定。

建立 Vue 應用 ​

在本節中，我們將介紹如何在本地機器上搭建 Vue 單頁應用。建立的專案將使用基於 Vite 的構建設定，並允許我們使用 Vue 單檔案元件 (SFC)。

請確保您已安裝最新版本的 Node.js，並且您當前的工作目錄是您打算建立專案的目錄。在您的命令列中執行以下命令（無需輸入 $ 符號）

$ npm create vue@latest

$ pnpm create vue@latest

# For Yarn (v1+)
$ yarn create vue

# For Yarn Modern (v2+)
$ yarn create vue@latest

# For Yarn ^v4.11
$ yarn dlx create-vue@latest

$ bun create vue@latest

此命令將安裝並執行 create-vue，這是官方 Vue 專案腳手架工具。您將看到有關 TypeScript 和測試支援的幾個可選功能的提示

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

如果您對某個選項不確定，現在只需按 Enter 鍵選擇 否。一旦建立專案，請按照說明安裝依賴項並啟動開發伺服器

$ cd <your-project-name>
$ npm install
$ npm run dev

$ cd <your-project-name>
$ pnpm install
$ pnpm run dev

$ cd <your-project-name>
$ yarn
$ yarn dev

$ cd <your-project-name>
$ bun install
$ bun run dev

現在您應該有一個執行的第一個 Vue 專案了！請注意，生成的專案中的示例元件是使用 Composition API 和 <script setup> 編寫的，而不是使用 Options API。以下是一些額外的提示

• 推薦的IDE設定是 Visual Studio Code + Vue - 官方擴充套件。如果您使用其他編輯器，請檢視 IDE支援部分。
• 更多工具資訊，包括與後端框架的整合，請參閱 工具指南。
• 要了解有關底層構建工具Vite的更多資訊，請檢視 Vite文件。
• 如果您選擇使用TypeScript，請檢視 TypeScript使用指南。

當您準備好將應用程式部署到生產環境時，請執行以下命令

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

這將建立一個位於專案 ./dist 目錄中的生產就緒版本的應用程式構建。有關將應用程式部署到生產的更多資訊，請檢視 生產部署指南。

下一步 >

從CDN使用Vue ​

您可以直接透過script標籤從CDN使用Vue

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

這裡我們使用 unpkg，但您也可以使用任何提供npm包的CDN，例如 jsdelivr 或 cdnjs。當然，您也可以下載此檔案並自行提供。

從CDN使用Vue時，不涉及“構建步驟”。這使得設定變得更加簡單，適合增強靜態HTML或與後端框架整合。但是，您將無法使用單檔案元件（SFC）語法。

使用全域性構建 ​

上述連結載入了Vue的 全域性構建，其中所有頂級API都作為全域性 Vue 物件上的屬性暴露。以下是一個使用全域性構建的完整示例

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

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

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

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

使用ES模組構建 ​

在其餘的文件中，我們將主要使用 ES模組 語法。大多數現代瀏覽器現在原生支援ES模組，因此我們可以透過以下方式從CDN使用Vue

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

注意，我們使用 <script type="module">，並且匯入的CDN URL指向Vue的 ES模組構建。

啟用匯入對映 ​

在上面的示例中，我們從完整的CDN URL匯入，但在其餘的文件中，您將看到類似這樣的程式碼

import { createApp } from 'vue'

我們可以透過使用 匯入對映 來教瀏覽器在哪裡找到 vue 的匯入

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

您還可以將其他依賴項的條目新增到匯入對映中 - 但請確保它們指向您打算使用的庫的ES模組版本。

模組拆分 ​

隨著我們深入瞭解指南，我們可能需要將程式碼拆分為單獨的JavaScript檔案，以便更容易管理。例如

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count is: {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count is: {{ count }}</div>`
}

如果你直接在瀏覽器中開啟上面的 index.html，你會發現它丟擲一個錯誤，因為ES模組不能在 file:// 協議下工作，這是瀏覽器開啟本地檔案時使用的協議。

出於安全原因，ES模組只能在 http:// 協議下工作，這是瀏覽器開啟網頁時使用的協議。為了使ES模組在本地機器上工作，我們需要透過本地HTTP伺服器以 http:// 協議提供 index.html。

要啟動本地HTTP伺服器，首先請確保已經安裝了 Node.js，然後在包含HTML檔案的同一目錄的命令列中執行 npx serve。您還可以使用任何其他能夠以正確的MIME型別提供靜態檔案的HTTP伺服器。

你可能已經注意到匯入的元件模板是以JavaScript字串的形式內聯的。如果你使用的是VS Code，你可以安裝 es6-string-html 擴充套件，並在字串前加上 /*html*/ 註釋，以獲得它們的語法高亮。

下一步 ​

如果你跳過了 簡介，我們強烈建議你在繼續閱讀其他文件之前先閱讀它。