建立專案
新專案用官方脚手架 create-vue，建置工具是 Vite（讀作 veet，法文「快」）。不要再用 Vue CLI；它已進入維護模式。
前提：已安裝 Node.js（建議 LTS）與 npm。官方文件：快速上手。
建立第一個專案
依提示選 TypeScript、Vue Router、Pinia 等。入門可以先全不選，之後再加。接著：
瀏覽器打開終端機印出的本機網址（通常是 http://localhost:5173）。改 *.vue 會即時熱更新，這是 Vite 的開發伺服器。
上線前打包：
產物在 dist/，可放到任何靜態空間。
單檔元件（SFC）
大多數 Vue 專案用 *.vue 檔，把樣板、邏輯、樣式放在同一支檔：
<script setup>
import { ref } from 'vue'
const msg = ref('Hello Vue')
</script>
<template>
<h1>{{ msg }}</h1>
</template>
<style scoped>
h1 {
color: #42b883;
}
</style>
scoped 讓這份 CSS 只作用在這個元件，避免樣式互踩。根元件通常是 src/App.vue，由 src/main.js（或 main.ts）呼叫 createApp(App).mount('#app')。
還沒裝 Node 時
官方也提供 CDN 版本，把 Vue 用 <script> 掛進 HTML 就能試。適合在 Playground 或單頁 prototype；正式專案仍建議用 Vite。
推薦影音
Learn Vite with Evan You
來源：Vue Mastery
Evan You（Vue 與 Vite 作者）說明 Vite：開發時用原生 ES modules，不必整包打包；正式建置才交給 Rollup。對應本頁的 npm run dev／npm run build。
Vue 專案結構、基礎管理
來源：彭彭的課程
繁中帶看 Vite 專案目錄：src/、App.vue、main.js 各管什麼。看完再對照本頁的單檔元件說明。完整清單在 影音教學。