直接用 Vite 创建带 TypeScript 的 Vue 3 项目最简且推荐，执行 npm create vite@latest my-app -- --template vue-ts 即可开箱即用，含预配置 tsconfig.json、、typescript 等依赖及类型检查。
直接用 Vite 创建带 TypeScript 的 Vue 3 项目是最简、最推荐的方式。Vue 官方已将 vue-ts 模板深度集成，无需手动配类型系统或补全插件，开箱即用。
一步创建带 TS 的 Vue3 项目
在终端执行命令（项目名可自定义）：
npm create vite@latest my-app -- --template vue-ts
之后按提示进入目录、安装依赖、启动服务：
立即学习“前端免费学习笔记（深入）”；
- cd my-app
- npm install
- npm run dev
浏览器打开 http://localhost:5173 就能看到运行中的 Vue3 + TS 初始页面。
创建时关键选项说明
Vite 交互式创建会引导你选择技术栈。确保选中：
- Framework → Vue
- Variant → TypeScript（不是 JavaScript 或 JSX）
如果跳过交互、直接用命令行，就靠 --template vue-ts 明确指定，避免误生成 JS 版本。
项目里 TypeScript 已自动就位
初始化后，你会看到：
- 根目录下有 tsconfig.json，已预设严格模式（
"strict": true）、模块解析和 Vue 类型支持 -
src/App.vue和src/components/HelloWorld.vue都使用<script setup lang="ts"></script> - 依赖中已包含
typescript、@vitejs/plugin-vue和vue-tsc（用于类型检查）
不需要额外装 @types/node 或手动写声明文件——这些都由模板内置完成。
验证 TS 是否生效的小技巧
改一下 src/App.vue 里的响应式变量，加个类型再故意写错：
const count = ref<number>(0) count.value = 'hello' // 这行会立刻在编辑器报错：Type 'string' is not assignable to type 'number'
说明类型检查已在工作。保存后终端也可能输出 vue-tsc 的诊断信息。
