想要快速體驗 Vue，你可以直接試試我們的演練場。
如果你更喜歡不用任何構建的原始 HTML，可以使用 JSFiddle 入門。
如果你已經比較熟悉 Node.js 和構建工具等概念，還可以直接在瀏覽器中打開 StackBlitz 來嘗試完整的構建設置。
前提條件
- 熟悉命令行
- 已安裝 16.0 或更高版本的 Node.js
在本節中，我們將介紹如何在本地搭建 Vue 單頁應用。創建的項目將使用基於 Vite 的構建設置，並允許我們使用 Vue 的單文件組件 (SFC)。
確保你安裝了最新版本的 Node.js，並且你的當前工作目錄正是打算創建項目的目錄。在命令行中運行以下命令 (不要帶上 > 符號)：
> npm 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 / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.如果不確定是否要開啟某個功能，你可以直接按下回車鍵選擇 No。在項目被創建後，通過以下步驟安裝依賴並啟動開發服務器：
> cd <your-project-name>
> npm install
> npm run dev
你現在應該已經運行起來了你的第一個 Vue 項目！請注意，生成的項目中的示例組件使用的是組合式 API 和 <script setup>，而非選項式 API。下面是一些補充提示：
當你準備將應用發布到生產環境時，請運行：
> npm run build
此命令會在 ./dist 文件夾中為你的應用創建一個生產環境的構建版本。關於將應用上線生產環境的更多內容，請閱讀生產環境部署指南。
你可以借助 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, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
本指南中許多關於組合式 API 的例子將使用
<script setup>語法，這需要構建工具。如果你打算在沒有構建步驟的情況下使用組合式 API，請參考setup()選項的用法。
在本文檔的其余部分我們使用的主要是 ES 模塊語法。現代瀏覽器大多都已原生支持 ES 模塊。因此我們可以像這樣通過 CDN 以及原生 ES 模塊使用 Vue：
<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'
我們可以使用導入映射表 (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, ref } from 'vue'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>
你也可以在映射表中添加其他的依賴——但請務必確保你使用的是該庫的 ES 模塊版本。
導入映射表的瀏覽器支持情況 導入映射表是一個相對較新的瀏覽器功能。請確保使用其支持範圍內的瀏覽器。請注意，只有 Safari 16.4 以上版本支持。
生產環境中的注意事項 到目前為止示例中使用的都是 Vue 的開發構建版本——如果你打算在生產中通過 CDN 使用 Vue，請務必查看生產環境部署指南。
隨著對這份指南的逐步深入，我們可能需要將代碼分割成單獨的 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
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 字符串。如果你正在使用 VSCode，你可以安裝 es6-string-html 擴展，然後在字符串前加上一個前綴注釋 /*html*/ 以高亮語法。
如果你尚未閱讀簡介，我們強烈推薦你在移步到後續文檔之前返回去閱讀一下。