快速上手 線上嘗試 Vue 想要快速體驗 Vue，你可以直接試試我們的演練場。
如果你更喜歡不用任何構建的原始 HTML，可以使用 JSFiddle 入門。
如果你已經比較熟悉 Node.js 和構建工具等概念，還可以直接在瀏覽器中打開 StackBlitz 來嘗試完整的構建設置。
創建一個 Vue 應用 前提條件
熟悉命令行已安裝 18.3 或更高版本的 Node.js在本節中，我們將介紹如何在本地搭建 Vue 單頁應用。創建的項目將使用基於 Vite 的構建設置，並允許我們使用 Vue 的單文件組件 (SFC)。
確保你安裝了最新版本的 Node.js，並且你的當前工作目錄正是打算創建項目的目錄。在命令行中運行以下命令 (不要輸入 $ 符號)：
npmpnpmyarnbunsh$ npm create vue@latestsh$ pnpm create vue@latestsh$ yarn create vue@latestsh$ bun create vue@latest這一指令將會安裝並執行 create-vue，它是 Vue 官方的項目腳手架工具。你將會看到一些諸如 TypeScript 和測試支持之類的可選功能提示：
✔ 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 ./
Done.如果不確定是否要開啟某個功能，你可以直接按下回車鍵選擇 No。在項目被創建後，通過以下步驟安裝依賴並啟動開發伺服器：
npmpnpmyarnbunsh$ cd
$ npm install
$ npm run devsh$ cd
$ pnpm install
$ pnpm run devsh$ cd
$ yarn
$ yarn devsh$ cd
$ bun install
$ bun run dev你現在應該已經運行起來了你的第一個 Vue 項目！請注意，生成的項目中的示例組件使用的是組合式 API 和 這裡我們使用了 unpkg，但你也可以使用任何提供 npm 包服務的 CDN，例如 jsdelivr 或 cdnjs。當然，你也可以下載此文件並自行提供服務。
通過 CDN 使用 Vue 時，不涉及“構建步驟”。這使得設置更加簡單，並且可以用於增強靜態的 HTML 或與後端框架集成。但是，你將無法使用單文件組件 (SFC) 語法。
使用全局構建版本 上面的鏈接使用了全局構建版本的 Vue，該版本的所有頂層 API 都以屬性的形式暴露在了全局的 Vue 對象上。這裡有一個使用全局構建版本的例子：
html
Codepen 示例
html
Codepen 示例
TIP
本指南中許多關於組合式 API 的例子將使用 html
注意我們使用了
Codepen 示例
html
Codepen demo
你也可以在映射表中添加其他的依賴——但請務必確保你使用的是該庫的 ES 模塊版本。
導入映射表的瀏覽器支持情況
導入映射表是一個相對較新的瀏覽器功能。請確保使用其支持範圍內的瀏覽器。請注意，只有 Safari 16.4 以上版本支持。
生產環境中的注意事項
到目前為止示例中使用的都是 Vue 的開發構建版本——如果你打算在生產中通過 CDN 使用 Vue，請務必查看生產環境部署指南。
雖然 Vue 可以不依賴構建系統使用，但也可以考慮使用 vuejs/petite-vue 這個替代方案，以更好地適配可能在 jquery/jquery (過去) 或 alpinejs/alpine (現在) 的上下文中使用的情況。
拆分模塊 隨著對這份指南的逐步深入，我們可能需要將代碼分割成單獨的 JavaScript 文件，以便更容易管理。例如：
html
js// my-component.js
export default {
data() {
return { count: 0 }
},
template: `
}js// my-component.js
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `
}如果直接在瀏覽器中打開了上面的 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*/ 以高亮語法。
下一步 如果你尚未閱讀簡介，我們強烈推薦你在移步到後續文檔之前返回去閱讀一下。
繼續閱讀該指南
該指南會帶你深入了解框架所有方面的細節。
嘗試互動教程
適合喜歡邊動手邊學的讀者。
查看示例
瀏覽核心功能和常見用戶界面的示例。
！