快速入門 ​線上試用 Vue ​若要快速體驗 Vue，您可以直接在我們的程式碼演練場中試用。

如果您偏好不含任何建構步驟的純 HTML 設定，可以使用此JSFiddle作為起點。

如果您已熟悉 Node.js 和建構工具的概念，也可以在StackBlitz上，直接在瀏覽器中試用完整的建構設定。

建立 Vue 應用程式 ​前置需求

熟悉命令列安裝 Node.js 18.3 或更高版本在本節中，我們將介紹如何在您的本機上搭建一個 Vue 單頁應用程式骨架。建立的專案將使用基於 Vite 的建構設定，並允許我們使用 Vue 單一檔案元件 (SFC)。

請確保您已安裝最新版本的 Node.js，並且您的目前工作目錄是您打算建立專案的目錄。在命令列中執行以下指令 (不含 $ 符號)：

npmpnpmyarnbunsh$ npm create vue@latestsh$ pnpm create vue@latestsh# For Yarn (v1+)

$ yarn create vue

# For Yarn Modern (v2+)

$ yarn create vue@latest

# For Yarn ^v4.11

$ yarn dlx 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.如果您不確定某個選項，現在只需按下 Enter 鍵選擇 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 專案了！請注意，在產生的專案中，範例元件是使用 Composition API 和