官方推荐使用 create-vue 而非已进入维护模式的 vue-cli；需 node.js ≥18.0.0；执行 npm create vue@latest 交互式创建项目，配置基于 vite.config.ts，路由用 vue-router@4 组合式 api，main.ts 使用 createapp；注意 vs code 需安装 volar 及 typescript vue plugin 并禁用 vetur，避免包管理器混用导致依赖问题。
用 create-vue 而不是 vue-cli
现在官方主推的是 create-vue，vue-cli 已进入维护模式，新项目别再用它。执行命令前确保 Node.js 版本 ≥ 18.0.0（node -v 检查），否则 create-vue 会报错或生成失败。
直接运行：
npm create vue@latest
它会交互式提问：是否启用 TypeScript、Pinia、Vitest、ESLint 等——按需选，不确定就全按回车用默认值（推荐新手）。生成完进目录、安装依赖、启动：
cd <your-project-name><br>npm install<br>npm run dev
npm create vue@latest 生成的项目结构和 vue-cli 不同
最明显的是没有 vue.config.js，配置靠 vite.config.ts；路由用 vue-router@4，写法是组合式 API 风格；src/main.ts 里不再有 new Vue()，而是 createApp(App)。
立即学习“前端免费学习笔记（深入）”；
常见误操作：
- 试图在
src下新建vue.config.js—— Vite 项目不认这个文件 - 复制旧项目里的
router/index.js写法到新项目，结果createRouter报错 —— 新版必须传routes数组，且每个 route 的component要用defineAsyncComponent或动态import() - 在
shims-vue.d.ts里手动加declare module '*.vue'——create-vue默认已配好，加了反而可能冲突
VS Code 打开后没语法提示？检查插件和设置
必须装两个插件：Volar（不是 Vue 2 的 Vetur）和 TypeScript Vue Plugin (Volar)。装完重启 VS Code，否则 .vue 文件里的 setup 脚本不识别 ref、defineProps 等。
还要关掉一个干扰项：
- 进 VS Code 设置（
Ctrl+,），搜vetur，把Vetur: Enable取消勾选（如果装了 Vetur 的话） - 搜
typescript.preferences.includePackageJsonAutoImports，设为auto，避免import { ref } from 'vue'提示“未使用”却删不掉
启动报错 Cannot find module 'vue' 或热更新失效
大概率是 node_modules 混乱或 pnpm/yarn/npm 三者混用导致。解决方案很直接：
- 删掉
node_modules和package-lock.json（或yarn.lock、pnpm-lock.yaml） - 确认当前目录下只有
package.json，且里面dependencies含"vue": "^3.4.0"这类 3.x 版本 - 统一用
npm install（哪怕你平时用 pnpm）——create-vue生成的package.json是按 npm 语义写的，混用包管理器容易漏 link 或解析错 peer dep
热更新失效还可能是开启了 VS Code 的「保存时格式化」但没配好 Prettier + ESLint，导致保存瞬间改了代码又触发重载，看起来像卡住。临时关掉「Format On Save」试试。
真正麻烦的是 defineProps 类型推导在某些嵌套场景下失效，比如泛型组件或条件类型，这时候得手动加 as const 或拆出 interface——这点连 Volar 当前版本也处理不好，别硬刚，先跑起来再说。
