快速上手 ​

線上嘗試 Vue ​

• 想要快速體驗 Vue，你可以直接試試我們的演練場。

• 如果你更喜歡不用任何構建的原始 HTML，可以使用 JSFiddle 入門。

• 如果你已經比較熟悉 Node.js 和構建工具等概念，還可以直接在瀏覽器中打開 StackBlitz 來嘗試完整的構建設置。

創建一個 Vue 應用 ​

在本節中，我們將介紹如何在本地搭建 Vue 單頁應用。創建的項目將使用基於 Vite 的構建設置，並允許我們使用 Vue 的單文件組件 (SFC)。

確保你安裝了最新版本的 Node.js，並且你的當前工作目錄正是打算創建項目的目錄。在命令行中運行以下命令 (不要輸入 $ 符號)：

$ npm create vue@latest

$ pnpm create vue@latest

$ yarn 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.

如果不確定是否要開啟某個功能，你可以直接按下回車鍵選擇 No。在項目被創建後，通過以下步驟安裝依賴並啟動開發伺服器：

$ 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 項目！請注意，生成的項目中的示例組件使用的是組合式 API 和 <script setup>，而非選項式 API。下面是一些補充提示：

• 推薦的 IDE 配置是 Visual Studio Code + Vue - Official 擴展。如果使用其他編輯器，參考 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 以及原生 ES 模塊使用 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 模塊構建版本。

啟用 Import maps ​

在上面的示例中，我們使用了完整的 CDN URL 來導入，但在文檔的其餘部分中，你將看到如下代碼：

import { createApp } from 'vue'

我們可以使用導入映射表 (Import Maps) 來告訴瀏覽器如何定位到導入的 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*/ 以高亮語法。

下一步 ​

如果你尚未閱讀簡介，我們強烈推薦你在移步到後續文檔之前返回去閱讀一下。