<p>Vue 3 项目必须用 Volar 而非 Vetur，因二者底层协议不兼容，混用会导致语法高亮错乱、<script setup> 提示失效、类型推导中断及 defineProps 泛型被误删；正确做法是卸载 Vetur，安装官方 Vue - Official（即 Volar），并确保状态栏显示“Vue (Volar)”。</p>
Vue 3 项目必须用 Volar，不是 Vetur
Vue 3 项目里装 Vetur 会导致语法高亮错乱、<script setup> 提示失效、类型推导中断，甚至保存时自动删掉 defineProps 的泛型。这是插件底层协议不兼容导致的硬冲突。
正确做法是：卸载所有 Vue 相关旧插件（尤其是 Vetur），只安装官方推荐的 Vue - Official（即 Volar 的新名称）。它原生支持 <script setup>、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 中声明映射关系：
立即学习“前端免费学习笔记（深入）”；
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
{
"path-intellisense.mappings": {
"@": "${workspaceFolder}/src"
}
}注意两点：
-
${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 回调没写对，而不是开发服务器本身的问题。
