vite 创建 vue3 项目默认支持组合式 api，无需额外集成；执行 npm create vite@latest my-app --template vue 即可生成含 的项目，ref、onmounted 等开箱即用。

直接用 Vite 创建 Vue3 项目，默认就支持组合式语法（Composition API），不需要额外“集成”。Vite 是构建工具，Vue3 是框架，组合式 API 是 Vue3 内置的编程范式——只要项目基于 Vue3，setup 函数、ref、computed、watch 等就天然可用。

创建即支持：一步生成带组合式 API 的项目

运行以下命令，选择 Vue 框架和 JavaScript（或 TypeScript）模板：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• npm create vite@latest my-app --template vue
• 进入项目：cd my-app
• 安装依赖：npm install
• 启动开发服务器：npm run dev

生成的 src/App.vue 默认使用 <script setup></script> 语法糖，这就是组合式 API 的标准写法，无需配置即可使用 ref、onMounted、defineProps 等。

关键语法支持点说明

• <script setup></script> 是组合式 API 的推荐写法，编译时自动处理响应式解包和顶层绑定
• ref() 用于基础类型和简单对象，模板中直接写 {{ count }}，无需 .value
• reactive() 适合嵌套结构，但注意它返回的是代理对象，不能直接解构（需用 toRefs()）
• 生命周期钩子如 onMounted、onUpdated 直接从 'vue' 导入并调用
• 父子通信通过 defineProps 和 defineEmits 声明，响应式自然保持

常见误区提醒

• 不用手动安装 “组合式 API 插件”——它不是独立包，是 Vue3 核心能力
• 不必在 vite.config.js 中配置 Composition API 相关项
• 如果用的是旧版 Vue2 项目迁移，才需要关注兼容层；新项目无此问题
• setup() 函数写法（非 script setup）也完全支持，只是更 verbose

本质上，Vite + Vue3 = 开箱即用的组合式开发体验。重点是写对语法、理解响应式原理，而不是折腾集成步骤。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南