最稳妥方式是用webstorm内置向导执行npx create-vue，它自动处理node版本、依赖下载、ts配置和vite集成；需禁用自带vue.js插件并安装volar，正确配置tsconfig.json路径及vite运行脚本。
WebStorm 创建 Vue 项目，最稳妥的方式不是手动配脚手架，而是直接用内置向导走 npx create-vue —— 它自动处理 Node 版本、依赖下载、TS 配置和 Vite 集成，跳过 90% 的环境踩坑。
为什么别选 Vue CLI 全局安装？
全局装 @vue/cli 容易和本地项目依赖冲突，尤其当你同时维护多个 Vue 2/3 项目时：vue create 可能调用旧版模板，生成的 babel.config.js 和 webpack 配置会干扰 Vite 启动；npx create-vue 每次都拉最新稳定版，不污染全局环境，且 WebStorm 内置支持一键触发。
- 如果你已全局装了
@vue/cli，建议先运行npm uninstall -g @vue/cli，避免向导误判 -
npx create-vue默认用 Vite，不带 webpack 或 vue-cli-service，启动快、热更准、tsconfig 生成完整 - 遇到
command not found: create-vue，大概率是 npm 镜像源异常，执行npm config set registry https://registry.npmmirror.com再试
Volar 插件必须开，否则 <script setup lang="ts"></script> 基本废掉
WebStorm 自带的 “Vue.js” 插件只认 Options API，对 Composition API + TS 的类型推导完全失效：ref() 不提示泛型、defineProps 点不开定义、useRouter 标红。Volar 是 Vue 3 SFC 唯一正统语言服务。
- 进
Settings/Preferences → Plugins，搜Volar（不是 Vetur，也不是 Vue.js Support），安装并重启 IDE - 务必禁用 WebStorm 自带的
Vue.js插件，二者共存会导致defineComponent类型丢失 - 重启后打开任意
.vue文件，在<script setup lang="ts"></script>里写const count = ref(0)，按Ctrl+Click能跳转到ref类型定义，才算生效
tsconfig.json 被 WebStorm 忽略？检查 TypeScript 设置路径
WebStorm 不会自动识别项目根目录下的 tsconfig.json，尤其当 Vite 生成了 tsconfig.app.json 分离配置时，IDE 可能只读空配置，导致 import { ref } from 'vue' 报错“Cannot find module”。
- 进
Settings/Preferences → Languages & Frameworks → TypeScript - 确认
Compiler选项选的是Use TypeScript version specified in the tsconfig.json - 下方
tsconfig.json路径必须指向你项目的根目录tsconfig.json，不能是空或指向 node_modules - 如果仍报
Cann't find name 'defineProps'，检查tsconfig.json的"types"是否包含"vue"和"vite/client"
创建完跑不起来？先看终端输出里有没有 failed to load config from
这是 Vite 启动失败最常见原因，不是代码问题，而是配置文件加载中断：可能是 vite.config.ts 里写了 Node.js 不支持的语法（比如顶层 await）、或者 import 路径拼错导致解析失败，Vite 就会静默退出，WebStorm 控制台只显示 “process finished with exit code 1”。
- 在 WebStorm 终端（
Alt+F12）手动执行npm run dev，观察完整错误栈 - 若报
Cannot find module 'vite'，说明依赖没装全，删掉node_modules和package-lock.json，重跑npm install - 若报
ESM import issue，检查vite.config.ts开头是否漏了import { defineConfig } from 'vite'
真正卡住的点往往不在“怎么建”，而在“建完谁在管配置”——Volar 管语法、tsconfig 管类型、Vite 管运行，三者缺一不可，且 WebStorm 不会自动串联它们。每次新建项目后，花两分钟核对这三个环节，比后期逐个排查快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
