必须安装非deprecated版volar插件并禁用webstorm内置ts服务，同步配置tsconfig.json（含"jsx":"preserve"、"types":["vue"]等）与本地typescript版本，清理缓存后重启，才能解决defineprops标红、ref跳转失效等问题。
WebStorm 创建 Vue3 项目本身不难，难的是创建完立刻遇到 defineProps 标红、ref 点不进、<style lang="scss"></style> 里嵌套语法全报错——这些问题不是代码写错了，是 IDE 没认对上下文。
用 Vite 脚手架创建，别选 WebStorm 内置 Vue.js 模板
WebStorm 的 “New Project → Vue.js” 模板底层仍走 Vue CLI，已滞后于 Vue3 生态主流（Vite + TypeScript）。直接在终端用 vite 创建更可控、更轻量，也避免后续配置冲突。
- 终端执行：
npm create vite@latest my-vue-app -- --template vue-ts - 进项目目录：
cd my-vue-app - 装依赖：
npm install - 再用 WebStorm 打开整个文件夹（File → Open → 选中
my-vue-app根目录）
这样生成的项目结构干净，vite.config.ts、tsconfig.json、src/main.ts 全是最新约定，省去大量手动对齐工作。
Volar 必装且必须禁用内置 TS 服务
只装 Vue.js 插件，setup() 里的类型推断和模板中属性跳转基本失效；Volar（非 Deprecated 版）才是 Vue3 + TS 的核心支持插件。
- Settings → Plugins → 搜索
Volar→ 安装带 “(Deprecated)” 字样的那个不要点 - Settings → Languages & Frameworks → TypeScript → 勾选
Disable built-in TypeScript service for Vue files - 重启 WebStorm
漏掉第二步，defineProps() 解构后类型丢失、Unresolved variable 'computed' 这类提示会持续出现，不是重装插件能解决的。
