vue 3 项目必须用 volar 而非 vetur，因二者底层协议不兼容，混用会导致语法高亮错乱、 提示失效、类型推导中断及 defineprops 泛型被误删；正确做法是卸载 vetur，安装官方 vue - official（即 volar），并确保状态栏显示“vue (volar)”。
Vue 3 项目必须用 Volar，不是 Vetur
Vue 3 项目里装 Vetur 会导致语法高亮错乱、<script setup></script> 提示失效、类型推导中断，甚至保存时自动删掉 defineProps 的泛型。这是插件底层协议不兼容导致的硬冲突。
正确做法是：卸载所有 Vue 相关旧插件（尤其是 Vetur），只安装官方推荐的 Vue - Official（即 Volar 的新名称）。它原生支持 <script setup></script>、defineEmits、defineExpose 等组合式 API 语法，并与 TypeScript 深度协同。
- VS Code 设置里搜索 “vetur”，点击已安装项右上角的齿轮 → “卸载”
- 再搜索 “vue official”，安装后重启编辑器
- 打开任意
.vue文件，状态栏右下角应显示 “Vue (Volar)” 而非 “Vue (Vetur)”
路径别名 @/ 在 import 时没提示？配 path-intellisense 还得改 settings.json
path-intellisense 插件默认不认识 @/ 这种 Webpack/Vite 常用别名，即使你项目里 vite.config.ts 或 tsconfig.json 已配置了 "@": ["src"]，插件也不会自动读取。
必须手动在 VS Code 的 settings.json 中声明映射关系：
{
"path-intellisense.mappings": {
"@": "${workspaceFolder}/src"
}
}
注意两点：
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
-
${workspaceFolder}是 VS Code 内置变量，指向当前打开的项目根目录；不能写死成"@": "./src"或"@": "src" - 如果项目用了多层嵌套（比如 monorepo 子包），且
src不在根目录下，要按实际路径调整，例如"@": "${workspaceFolder}/packages/core/src"
npm run dev 启动失败，但控制台没报错？检查终端是否在项目根目录
VS Code 内置终端默认打开位置不一定是项目根目录，尤其当你从文件资源管理器双击进入某个子文件夹再开终端时，cd 位置可能卡在 src/ 或 components/ 下。此时执行 npm run dev 会提示 npm ERR! Missing script: "dev" 或直接报 package.json not found。
解决方法很简单：
- 看终端第一行路径，确认是否为项目根目录（含
package.json和vite.config.ts） - 如果不是，先执行
cd ..多次，或直接cd /your/project/path - 更省事的是：在 VS Code 文件资源管理器中右键项目根文件夹 → “在集成终端中打开”
修改代码后浏览器没更新？别急着关服务，先看 Vite 的热更新日志
Vite 默认开启 HMR（模块热替换），但有时保存后页面无反应，不代表功能坏了。先看终端输出：
- 出现
[vite] hot updated: /src/App.vue→ 更新已触发，可能是组件内部逻辑没触发视图重绘（比如 ref 值没变） - 出现
[vite] error while updating dependencies→ 某个依赖解析失败，HMR 中断，需检查控制台红字错误 - 完全没日志 → 可能文件没被 Vite 监听，常见于新建了
.vue文件但未在任何地方import，或文件放在了public/下
真正需要重启服务的情况其实很少——多数时候只是某处 ref 没正确解构，或 watch 回调没写对，而不是开发服务器本身的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
