Vue项目不能直接编译运行单个.vue文件，因其需经vite等构建工具处理；应通过npm create vite@latest初始化项目，再npm run dev启动开发服务器。
Vue 项目不能直接“编译运行”单个 .vue 文件
VS Code 本身不带 Vue 编译能力，vue 文件是组件格式，不是可执行脚本。你看到的 .vue 文件必须放在一个完整的 Vue 项目里，由 vue-cli、vite 或 webpack 这类构建工具处理后才能运行。
常见错误现象：Cannot find module 'vue'、点击“运行”没反应、浏览器打开空白页或报 Failed to load module script —— 这些都说明你试图绕过构建流程直接执行。
- 如果你只有单个
App.vue，得先用npm create vue@latest或npm create vite@latest my-vue-app -- --template vue初始化项目 - 不要双击打开
.vue文件就点 ▶️ 运行；VS Code 的“运行”按钮默认找的是node或python脚本，对.vue无效 -
vite是目前最轻量、启动最快的方案，推荐新项目首选
用 Vite 快速启动一个 Vue 项目（实操步骤）
这是当前最贴近“写完就能跑”的方式，5 分钟内可完成，且无全局依赖冲突风险。
- 打开终端（VS Code 内置终端即可），cd 到你想放项目的目录，执行：
npm create vite@latest my-vue-app -- --template vue
- 进入项目：
cd my-vue-app
- 安装依赖：
npm install
- 启动开发服务器：
npm run dev
—— 它会自动打开http://localhost:5173 - 修改
src/App.vue后，页面实时热更新，无需手动刷新
注意：npm run dev 启动的是开发服务器，不是“编译成静态文件”。如需生成部署包，用 npm run build，产物在 dist/ 目录。
立即学习“前端免费学习笔记（深入）”；
为什么不用 “Code Runner” 插件直接运行 .vue？
因为 Code Runner 插件本质是调用命令行执行文件，而 .vue 不是 JS、TS、Python 那类可直解的源码 —— 它包含 <template>、<script setup>、<style> 三块，必须经解析、编译、打包才能变成浏览器能懂的 JS + HTML + CSS。
- 试图配置 Code Runner 去跑
vue命令，会报错：vue is not recognized as an internal or external command - 即使全局装了
@vue/cli，vue serve已被废弃，且只支持 Vue 2 单文件，不兼容 Vue 3 的<script setup> - 有些插件号称“Vue Preview”，只是渲染组件快照，不走真实构建流程，交互和生命周期不可靠
调试时 VS Code 怎么配合 Vue Devtools？
开发中想看响应式数据、组件树、事件触发，光靠 console.log 不够，得用浏览器端的 Vue Devtools 扩展（Chrome / Edge / Firefox 都有）。
- 确保项目运行在
http://localhost:5173这类本地 HTTP 服务上（不能是file://协议） - 打开浏览器开发者工具 → 切到
Vue标签页（若没出现，检查是否启用、是否在开发模式下运行） - VS Code 中打
debugger或设置断点，需在launch.json中配好chrome调试器，并启用"url": "http://localhost:5173" - 注意：Vite 默认开启 source map，所以断点能精准落到
App.vue的<script setup>区域，不是编译后的 JS
真正卡住人的地方往往不是“怎么跑起来”，而是误以为单个 .vue 文件能像 index.html 那样双击打开 —— 它需要上下文，就像不能只拿一个函数去运行整个程序。
