Vue3+TS实战避坑指南
哈喽各位前端小伙伴，今天给大家分享一下我在做 Vue3 + TypeScript 项目时踩过的坑，全是实战干货，建议收藏！
一、为什么要选 Vue3 + TS
现在前端开发越来越卷，Vue3 搭配 TypeScript 已经成为主流方案。TypeScript 能提供类型校验，减少运行时错误，让代码更易维护；Vue3 的组合式 API 让逻辑复用更方便，大型项目开发效率直接拉满。
二、项目初始化常见问题
- Vue3 版本选择
优先使用^3.3.0以上版本，新特性更稳定，对 TS 支持更友好。 - TS 配置报错
tsconfig.json里一定要开启strict: true，同时配置vueCompilerOptions，避免模板类型校验失效。 - 依赖冲突
用pnpm替代 npm/yarn，依赖安装更快，还能有效解决幽灵依赖问题。
三、开发中的高频坑点
1. ref 和 reactive 混用混乱
- 基础类型用
ref，引用类型用reactive - 解构 reactive 数据会丢失响应式，要用
toRefs处理
2. defineProps 类型定义错误
// 错误写法constprops=defineProps({list:Array})// 正确写法interfaceListItem{id:numbername:string}constprops=defineProps<{list:ListItem[]}>()3. 路由跳转类型丢失
使用vue-router@4时，给路由配置添加类型定义，避免跳转时传参报错。
4. ESLint 与 Prettier 冲突
安装eslint-config-prettier和eslint-plugin-prettier，统一代码格式化规则。
四、打包优化小技巧
- 开启
vite的build.minify: 'terser'，压缩代码体积 - 路由懒加载，按模块分割代码
- 移除 console.log，生产环境关闭 devtools
五、总结
Vue3 + TS 虽然上手有一定成本，但熟练之后能大幅提升开发体验和项目质量。遇到问题不要慌，多看文档多踩坑，慢慢就熟练了。
大家在开发中还遇到过哪些奇葩问题？欢迎在评论区交流讨论，一起进步！