每次开新项目最烦的就是搭环境。vue3项目搭建这个标题听起来不过六个字但真正落成一套能跑、能维护、能部署、能应付业务的工程骨架涉及到的细节和坑比官方文档里写的多得多。我前后用Vue3从零搭过后台管理端、商城前端、还有嵌在客户端壳子里的内嵌页面每一步都踩过不止一遍。这篇就把我自己沉淀下来的一套搭建流程和避坑清单整理出来从环境准备、工程配置、核心功能落地到Vue2老项目迁移和常见问题排查一次讲透希望能让准备上手Vue3的朋友少走些弯路。这篇内容不挑基础刚看完Vue3文档想动手写第一个项目的人能跟着操作已经被业务项目折磨过一阵子的开发者也能从中找到几处值得对照的细节。我尽量说人话不堆概念把每个关键选择背后的原因也一并讲清楚毕竟只给结论不给理由换个环境你照样不会变通。1. 先把地基打牢环境准备与脚手架选型1.1 Node版本和包管理器是第一道闸门很多人搭Vue3项目一头扎进命令跑完create-vite就报错十有八九是Node版本不对。Vite 5及以上版本要求Node 18Vite 6甚至建议Node 18.18或20。我见过不少同事机器上还躺着Node 14那跑npm create vuelatest直接提示UnhandledPromiseRejection一眼看上去像网断了实际上是版本太旧。建议第一步先确认Node版本node -v npm -v低于18的优先用nvm切换版本别直接去官网覆盖安装。同一台机器上可能会有多个老项目依赖旧Node全局覆盖是给自己埋雷。装完nvm之后当前项目目录里可以放一份.nvmrc文件内容就写20或者18.18这种团队其他人进来nvm use一下就能同步版本这是我在实际项目中养成的习惯。包管理器方面npm、yarn、pnpm都能用但我个人强烈建议新项目直接上pnpm。原因很简单Vue3生态里很多包比如vite-plugin-vue-setup-extend、unplugin-auto-import在npm的扁平化依赖结构下偶尔会出一些奇奇怪怪的幽灵依赖问题而pnpm的硬链接和严格依赖隔离机制能把这些坑拦在门外。项目跑起来之后的安装速度差距也明显尤其在依赖上百个的规模pnpm的优势不是一点点。安装方式也很简单npm install -g pnpm pnpm --version1.2 新项目脚手架怎么选Vite当主力Vue CLI只用来接手旧项目官方现在主推的脚手架是create-vue也就是npm create vuelatest它本质上是基于Vite的上层封装会问你需不需要TS、JSX、Router、Pinia、Vitest等按需勾选特别舒服。我通常的勾选组合是TypeScript必勾JSX看团队成员熟悉程度Router和Pinia必须Vitest看项目要不要做单测ESLintPrettier必勾。如果你想更轻一点直接用create-vite然后手动装Vue插件也可以但对于一个正经要长期维护的项目我还是建议用create-vue它生成的文件组织是官方团队整理过的后续维护成本低。这里得说清楚Vue CLIwebpack版本怎么选。如果是从零开始的新项目真没必要再用vue create了。Vite冷启动和热更新的体感是碾压级差异的一个几千条路由的大型后台项目webpack dev server冷启动可能要几十秒Vite基本在1-2秒内。但如果你要接手的是一个跑了好几年的Vue2老工程那vue/cli依旧有它的价值因为它能稳定地处理webpack配置里的各种历史包袱这时候别强行切Vite等后续做渐进迁移再动。1.3 一分钟跑起一个基础项目我直接把常用的命令写在这里这是经过多次验证的稳定路径# 创建项目my-vue3-app 换成你的项目名 npm create vuelatest my-vue3-app # 进入目录 cd my-vue3-app # 安装依赖 pnpm install # 启动开发服务器 pnpm devcreate-vue的交互式提问里有个细节Add TypeScript?如果团队里有人不熟TS可以先选No但现实是我在多个项目里最后都后悔没一开始就上TS。Vue3的响应式系统对类型推导支持已经非常成熟写业务代码时编辑器提示带来的效率提升远大于学习成本。哪怕现在不熟也建议选上TS然后找时间补基础业务代码可以先用any顶着。这是实用主义不是理论洁癖。2. 工程化必备配置让项目从“能跑”变成“好维护”2.1 SCSS全局变量和路径别名第一天就配好很多热词里都在问vue3安装scss这里直接把步骤给全。在Vite项目里装SCSS只需要两个开发依赖pnpm add -D sass注意装sass这一个包就够了node-sass那套老掉牙的方案别碰了node-sass在Node 18以上的安装经常要过编译折腾死人。新版本的sass是纯Dart实现安装即用不需要额外配置就能在style langscss里写SCSS语法。但你如果想把全局变量、mixin共享到每个组件里光装sass还不够需要在vite.config.ts里配置额外的css.preprocessorOptions// vite.config.ts export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: use /styles/variables.scss as *; } } } })这里要提一个新手极其容易踩的坑以前webpack时代很多人用import引入全局SCSS但在dart-sass的新版本里import已经被标记为废弃建议一律用use。同时use的变量默认是带命名空间的不加as *你在组件里写$primary-color会直接报“undefined variable”这属于实操中频率最高的SCSS配置错误。路径别名同样是第一天就要配好的事。默认的./相对路径在组件嵌套深一点之后写着写着就变成../../../维护成本极其痛苦。配置方式是在vite.config.ts里加import { fileURLToPath, URL } from node:url export default defineConfig({ resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)) } } })同时要在tsconfig.json里加对应的路径映射否则TS会报红{ compilerOptions: { paths: { /*: [./src/*] } } }2.2 路由、状态管理库怎么选什么时候上Vue Router 4和Pinia是Vue3官方钦定的组合这已经是生态共识不用犹豫。安装pnpm add vue-router4 piniaPinia相比Vuex最大变化是去掉了mutationstate、getters、actions一把梭而且支持组合式写法在组件外面也能直接调用store。我在新项目里建议直接用组合式写法定义store配合setup语法大概长这样// src/stores/user.ts import { ref } from vue import { defineStore } from pinia export const useUserStore defineStore(user, () { const token ref() const nickname ref() function setToken(value: string) { token.value value } return { token, nickname, setToken } })这种写法对TS支持最友好也符合Composition API的心智模型团队里如果本来就熟悉setup语法上手零成本。路由方面后台管理系统最常涉及的是动态路由和路由守卫两个点。动态路由的思路一般是登录后从后端拿菜单权限数据前端根据权限数据递归生成路由表用router.addRoute()动态注册。这里要特别提醒一点addRoute添加的路由在刷新后会丢失所以必须在main.ts或者App.vue的初始化逻辑里重新拉权限并注册。就这个问题我在热词里看到很多人搜vue3搜索条件保留实际上很多“刷新后状态丢失”的问题根源不是前端业务代码而是路由和Pinia的初始化顺序没处理好。2.3 代码规范和提交规范别等代码多了再补ESLint Prettier在create-vue的交互式提问里可以直接勾选这样生成的就是已配好的版本。但很多项目在创建时觉得“先跑起来再说”等代码写到几百个文件之后再补lint那成本就是指数级了改起来全是历史文件。所以这一步我强烈建议在脚手架阶段就完成。代码规范之外husky lint-staged也是我每个项目的标配。作用就是提交代码之前自动对暂存区的文件跑一遍eslint和prettier不通过的代码根本进不了仓库。pnpm add -D husky lint-staged npx husky initinit执行完会在.husky/pre-commit里生成示例钩子把内容改成npx lint-stagedpackage.json里加{ lint-staged: { *.{js,ts,vue,tsx,jsx}: [eslint --fix, prettier --write] } }这个配置看起来简单但实际体验是团队里每个人写的代码风格都能保持一致code review时再也不用纠结一个组件里有人用单引号有人用双引号这种无意义争论。3. 核心功能实现业务需求背后那点通用套路3.1 Composition API和script setup的日常打开方式Vue3的script setup语法是现在写组件的主流直接省掉了export default那一层壳变量和函数直接暴露给模板。一个典型的Vue3SassPinia组合的组件头部长这样script setup langts import { ref, computed, onMounted } from vue /scriptref和reactive的选择我的经验是能用ref就用ref。ref在TS下类型推导更自然而且在模板里自动解包不需要写.value。reactive最大的问题是它在解构时会丢失响应性稍微不注意就踩坑const state reactive({ count: 0 }) // 这样解构之后 count 就不是响应式了 const { count } state热词里提到vue3 composition api和option api这两个写法的核心区别在哪里本质上是逻辑复用的方式变了。Options API把同一个功能的data、methods、watch、computed拆散在不同的对象字段里代码一长就得上下来回翻。Composition API允许你把相关逻辑写在一起再进一步封装成自定义hook。我举个实际业务常见场景——搜索条件保留// composables/useSearchForm.ts import { reactive, ref } from vue export function useSearchForm(fields: Recordstring, any) { const form reactive({ ...fields }) const loading ref(false) function resetForm() { Object.keys(form).forEach(key { form[key] fields[key] }) } return { form, loading, resetForm } }页面里用的时候搜索表单相关的数据、重置逻辑、加载状态全部打包在一起这才是Composition API真正值钱的地方。3.2 动态表单、规则校验和JSX的实践位置热词里出现频率很高的vue3 rules 日期检验和vue3动态添加删除form表单一行数据明说这俩在Element Plus里都有原生解法但很多人只停留在会用组件的层面。动态添加删除一行表单数据本质是操作一个数组const formList ref([{ name: , date: , time: }]) function addRow() { formList.value.push({ name: , date: , time: }) } function removeRow(index: number) { formList.value.splice(index, 1) }配合Element Plus的v-for遍历渲染每一行绑定自己的索引删除时索引对了就不会串行。这里面真正容易出问题的反而在rules的日期校验尤其是“开始日期不能晚于结束日期”这种联动场景。常规的日期格式校验直接写pattern就能过但联动校验必须在validator里拿另一个字段的值比对const rules { startDate: [{ validator: (_rule: any, value: string, callback: any) { if (!value) { callback(new Error(请选择开始日期)) } else if (form.endDate value form.endDate) { callback(new Error(开始日期不能晚于结束日期)) } else { callback() } }, trigger: change }] }这里有个坑值得单独说用trigger: change还是trigger: blur日期选择器类的组件blur事件有时候根本不会触发导致校验表单不执行。要么统一用change要么两个都写上这是我在项目里改过好几轮才摸清的规律。至于vue3使用jsx我明确说日常业务组件用模板就够了但如果你要写高阶封装组件、函数式弹窗、或者是像表格列配置那样动态渲染的场景JSX的灵活性能让你少掉一半头发。Vite下用JSX只需要官方插件vitejs/plugin-vue-jsxpnpm add -D vitejs/plugin-vue-jsx// vite.config.ts import vueJsx from vitejs/plugin-vue-jsx export default defineConfig({ plugins: [vue(), vueJsx()] })3.3 文件预览、在线编辑和前后端对接的注意点热词里的vue3 pdf预览是后台系统常见需求最简单的方式是让后端传PDF文件的URL前端直接用iframe或者浏览器内置的PDF预览能力。但跨域和文件名带中文的场景下更稳的方案是后端返回文件流前端用URL.createObjectURL生成临时地址再嵌入iframeconst res await fetch(/api/file/pdf, { method: GET }) const blob await res.blob() const url URL.createObjectURL(blob)记得在组件卸载时调用URL.revokeObjectURL(url)释放内存否则单页应用长时间切换页面浏览器内存会哗哗涨。另外热词里有vue3 onlyoffice 在线编辑和cefsharp vue3 window.cefbridge 注册这类都是偏嵌入式场景。嵌入客户端壳子时核心问题不是Vue3本身而是跨端通信安全性和初始化时机。CefSharp场景里前端要等window.cefSharp对象就绪之后再绑定事件但页面资源加载和C#端注入对象的时机有可能错位我用的稳妥方案是在onMounted里轮询检测确认存在后再注册同时要注意暴露给外部壳子的接口要做参数白名单校验别把内网页面里的一些内部方法全部挂到全局能被外部任意调用就容易出问题。4. 老项目迁移Vue2工程能不能迁、该不该迁、怎么迁4.1 先摸清楚家底再谈迁移别指望一把梭热词里有一条特别扎眼成熟项目 vue2 能转 vue3 吗。我的标准答案是能迁但没人能保证一行不改。Vue2到Vue3是破坏性升级不是版本号平滑过渡。根据我帮别人迁项目还有自己业务迁移的经验以下是较高的几个改动点Vue.prototype.$xxx这类全局挂载方法没了要改成app.config.globalProperties.$xxx过滤器filter在Vue3里彻底移除$children、$listeners也被移除了事件总线$on、$off不再支持跨组件通信要改用mitt或者Piniav-model的行为变了Vue2里一个组件可以用多个v-model吗也得靠.syncVue3里统一用多个v-model:xxxslot语法变了slot-scope废弃统一定为v-slotfunctional组件标记和函数式组件的写法也改了不过日常开发里函数式组件占比不大影响相对可控这些都是拍着脑袋能列出来的真正到了迁移现场还有大量隐性差异会从角落里杀出来。比如$set在Vue3里不需要了因为Proxy代理数组下标赋值和对象新增属性都是可响应的又比如事件修饰符的写法变化。在迁之前先把项目依赖梳理一遍像vue-router要升到4、vuex要升到3.5以上然后往Pinia过渡、UI组件库要对齐Vue3版本这些前置动作不准备好迁移会变成一场灾难。4.2 迁移的务实策略新页面走新写法老页面按批次改团队里的成熟老项目如果要迁不建议停下来专门搞大迁移业务方不会给你那么多时间窗口。我实际验证过可行的路径是“增量迁移”核心思路是先把工程依赖升级到兼容Vue3的全家桶版本比如Vue 2.7开始就已经自带部分Composition API能力新写的页面一律用Vue3的script setup语法和组合式风格老页面在需求迭代时顺手改改一个是一个对于依赖老框架特性的代码比如全局事件总线、filter这种先在代码里搜索定位集中做一个兼容层或者替换方案等老代码房占比降到一定比例再找一个合适的发版窗口组织全量切换这样项目一直在往前走不会出现“迁移三个月没法交版”的尴尬局面。4.3 若依这类低代码框架的报错要怎么处理热词里出现的若依vue3 ts报错也值得单独拉出来说说。这类框架类工程因为自带一套代码生成和通用逻辑对开发者来说最大的问题不是不会写Vue3而是框架本身有隐含的约定。最常见的TS报错集中在路由meta上的类型定义、全局属性类型声明、自定义指令的类型声明。解决套路很统一先找到项目里的env.d.ts把缺的类型补声明上。比如路由meta一般会自定义title、icon、hidden这些字段TS默认的RouteMeta里没有就得自己扩展import vue-router declare module vue-router { interface RouteMeta { title?: string icon?: string hidden?: boolean keepAlive?: boolean } }这类报错本质是TS的类型收窄问题跟框架本身没关系理解了声明合并报错就能一手按住。5. 常见问题排查与避坑实录5.1 UI框架引入不生效和样式覆盖问题热词有vue3引入所有的ui框架都不生效这种表述大概率是把Vue2组件库直接装到Vue3项目里了。Vue3只能跑支持Vue3的组件库版本比如Element Plus对应Element UIVant 4对应Vant 2Naive UI原生就是Vue3的。装完还不行的话检查这几处组件库样式文件有没有在main.ts里引入多数组件库是组件和样式分离的比如Element Plus走unplugin-auto-import和unplugin-vue-components按需引入时组件样式往往由插件自动处理但某些特殊组件的样式需要手动引入项目里如果配了SCSS的additionalData里面如果写了比较重的全局样式可能在某些场景下意外覆盖了组件库的部分样式深色模式或自定义主题覆盖时很多组件库用的是CSS变量覆盖时要找到具体的变量名而不是直接写类名选择器我在后台项目里调Element Plus主题色是有固定套路的先引入全量样式再覆盖--el-color-primary这类CSS变量。比起用/deep/去硬杠用变量体系匹配组件库的设计思路会稳定得多。5.2 局域网访问白屏、菜单按钮消失这些“玄学问题”热词里vue3 vite dev 局域网打开空白这问题我碰到太多次了原因一般是Vite默认监听localhost局域网内其他设备访问不到。解法是在vite.config.ts里设置server: { host: true }host: true让Vite监听所有网络地址这样就能通过局域网IP访问。如果配完之后白屏那大概率是页面报错但没被看到打开浏览器控制台检查一下还有一种情况是用history模式路由直接访问非根路径刷新后静态服务器没配置回退到index.html开发环境里Vite默认为SPA做回退但到生产环境部署到Nginx后必须自己配try_fileslocation / { try_files $uri $uri/ /index.html; }热词里vue3 tabs标签页样式和vue3 on-success监听不到这些细粒度问题背后逻辑基本都是一类组件库的DOM结构变更导致样式选择器失效或者事件名的驼峰命名转换导致监听不上。Element Plus的tab切换事件是tab-change在模板里写作tab-change如果你在onMounted里用原生事件绑定的方式去监听它建议不要统一走组件派发事件。至于上传组件的on-success监听不到先检查函数是否真的传到组件上了而不是写到自定义的options对象里去了。5.3 深度优化首屏加载、搜索条件保留和内存泄漏vxetable怎么避免vue3首屏加载这类性能问题在大数据量表格场景里是必考题。vxe-table本身支持虚拟滚动但真正导致首屏卡的往往不是表格而是加载到全局的路由和组件。我优化过几个项目的固定套路是路由全部改用懒加载大型后台可以进一步按模块分包组件库按需自动引入别全量打包对不常用的第三方库比如PDF预览、Excel导入导出类库用动态import按需加载对大表格套vxe-grid配scroll-y保证可视区之外的行不渲染至于vue3搜索条件保留比较常见的是用户填了一堆搜索条件后点进详情页再返回表单被清空了。我的解法是把搜索表单状态放到Pinia里或者用keep-alive缓存列表页组件。要注意的是keep-alive的使用要围绕router-view做出调整并且设置include或exclude控制哪些列表页需要缓存不能所有页面一揽子缓存否则详情页的数据永远是旧的。另外缓存的组件里如果有定时器、轮询逻辑在onActivated和onDeactivated生命周期钩子里要分别处理开启和暂停不然切走页面定时器还在跑典型的内存泄漏源。5.4 与后端接口联调的常见阻塞点热词里vue3访问后端是个范围很宽的问题。新项目最容易卡壳的其实是跨域。开发环境跨域推荐在Vite里配代理而不是让后端开CORS这样上线后不会有额外风险server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }生产环境如果前后端分离部署Nginx上把/api反向代理到后端服务地址即可。联调时还有一个细节axios请求拦截器里统一带上token响应拦截器里对HTTP状态码做统一处理比如401时跳转登录页。这些看起来像老生常谈但实际项目里因为拦截器写得混乱导致登录态失效后还在疯狂发请求的问题我见的绝不算少。6. 面试官最喜欢问的Vue3核心知识点也帮你自查6.1 响应式原理Proxy和defineProperty的本质差异这题在热词vue3面试题里稳稳占据C位。Vue2的响应式是Object.defineProperty对属性做劫持所以对象新增属性和数组下标赋值都监听不到。Vue3用Proxy代理整个对象那么无论读取、赋值还是删除属性任何操作都会经过代理层所以连delete obj.xxx也可以是响应式的。但这里有一个核心细节ref和reactive的实现底层不一样。reactive直接基于Proxyref则是包装了一个RefImpl类内部用一个_value存数据读取时走getter赋值时走setter。你写ref(0)获取时是count.value模板里自动解包所以不用写.value。理解这一点之后ref解包失效的场景问题就迎刃而解了数组里放ref对象在模板中遍历数组时元素不会被自动解包你得单独写item.value。6.2 ref、reactive和toRefs的选择逻辑很多面试题会问“什么时候用ref什么时候用reactive”我的答案是能用ref就用ref但当你要维护一个复杂的表单对象时用reactive能省掉一长串.value。另外如果有把一个响应式对象拆解出来给模板或子组件使用的需求就用toRefsconst state reactive({ name: 张三, age: 18 }) const { name, age } toRefs(state)这俩解构出来依然是响应式引用且对模板和TS都友好。要特别留意一个面试高频追问ref嵌套reactive到底会怎样。ref存的如果是对象它内部会自动用reactive去代理这个对象所以ref({})取到的内容依然深度响应。不要把这两者当作对立的理解成“ref是一个盒子盒子里放基本类型就直接包一层值放对象就交给Proxy处理”就彻底通了。6.3 watch、watchEffect和生命周期钩子的现代版本watch和watchEffect也是热门考点。简单区分watch需要指定要监听的数据源回调里能拿到新旧值适合需要精确控制触发条件和拿到前后对比的场景watchEffect是“哪些数据变化就自动执行”适合收集依赖并同步副作用比如把用户ID变化同步到请求里。生命周期方面和Vue2的对应关系我经常用这张表帮人记忆Vue2Vue3 OptionsVue3 CompositionbeforeCreatebeforeCreate由 setup 代替createdcreated由 setup 代替beforeMountbeforeMountonBeforeMountmountedmountedonMountedbeforeUpdatebeforeUpdateonBeforeUpdateupdatedupdatedonUpdatedbeforeDestroybeforeUnmountonBeforeUnmountdestroyedunmountedonUnmounted组合式API里可以在setup里多次调用onMounted对于复杂页面按功能分组注册钩子比Options API只允许一个mounted要干净得多。6.4 性能优化相关的面试点动态组件、v-memo和keep-aliveVue3在编译层做了很多优化v-memo和v-once是树摇级别的性能优化面试官很喜欢考v-memo到底解决什么问题。我用大白话说v-memo可以让你手动指定一组依赖当依赖不变时这个子树完全不更新。它适合那种数据不变但组件树比较重的场景比如大表格的某一列里嵌了复杂的组件可以针对性地包一层v-memo[row.id]实测对复杂列表的更新性能提升明显。keep-alive配合动态组件也是一个高频结合点后台管理系统的多标签页实现基本就是keep-aliverouter-view的组合把已打开的页面实例缓存住切换时不会丢失组件内部的状态。实现多标签页时要注意keep-alive的include要跟路由name配合好路由不写name的话缓存根本不生效这一点我在好几个团队代码里发现过。7. 多端场景和生态扩展从后台到商城到嵌入式7.1 后台管理系统、商城这类中后台项目的同构套路热词里vue3后台管理系统和vue3商城高频出现。中后台项目的骨架其实高度相似登录权限、动态菜单、内容区多标签页、基于表格的表单增删改查、权限指令。我搭过不止一个这类项目核心建议是先把基础布局和权限模型定清楚再来谈页面功能。权限模型一般分为路由级权限和按钮级权限路由权限用动态addRoute实现按钮权限用自定义指令v-permission封装指令内部从Pinia的store里读取用户权限集合没有就移除元素app.directive(permission, { mounted(el, binding) { const { value } binding const userStore useUserStore() if (!userStore.permissions.includes(value)) { el.parentNode?.removeChild(el) } } })商城项目则多一个维度商品模型、购物车状态、订单状态、支付流程。购物车这类跨页面共享的数据最适合放Pinia因为刷新不丢靠持久化插件页面切换能即时同步同时组件间不用再层层emit。7.2 uni-app里用Vue3写跨端应用的注意点热词里uni-app vue3 ref万能对象和uniapp vue3 echarts 图片说明不少人已经在uni-app里用Vue3了。uni-app对Vue3的支持现在已经比较成熟但有几个特殊约束某些平台不支持Proxy的完整特性所以响应式在低版本小程序端会有一定差异遇到数据更新不触发视图的诡异问题优先排查是不是用了老式写法去操作对象。ref在模板里可以做“万能对象”是因为编译器对ref做了特殊的自动解包处理但在v-for里遍历数组内部的ref以及在某些需要在setup里传递整个响应式对象的场景还是得留神v-for循环中的ref数组问题。H5端使用ECharts通常直接在onMounted里初始化就行但如果要把图表生成图片保存到相册小程序端就得用canvas的toTempFilePath这类平台API不能直接拿H5的canvas.toDataURL这些差异在跨端项目里几乎每天都能遇到遇到就记下来慢慢会攒成团队的避坑手册。7.3 Vue3 Three.js TypeScript的3D应用搭建热词里还有基于 vue3 three.js typescript 机房这种偏可视化的项目。技术栈组合很清晰Vue3做应用框架Three.js做WebGL渲染TypeScript做类型安全和业务约束。搭建时关键在工程层面Three.js按需引入、场景资源加载时机、组件销毁时释放渲染器和几何体内存。用Vue3封装Three.js场景的通用套路是在onMounted里初始化WebGLRenderer、Scene、Camera在onBeforeUnmount里调用renderer.dispose()和scene.traverse去dispose几何体和材质否则单页应用切换路由几次后GPU内存会大幅飙升。用ref获取canvas元素时模板里写refcanvasRef在script setup里通过const canvasRef refHTMLCanvasElement | null(null)取到真实DOM再交给Three.js。8. 个人经验的最后补充我在实际项目里踩过最多次的坑总结下来就三条第一Node环境不一致导致的莫名其妙的依赖报错团队里一定要统一nvm和.nvmrc第二不要在脚手架阶段图省事跳过TS配置后面补的成本高十倍不止第三遇到性能问题先从网络请求和渲染列表数量下手不要一上来就怀疑框架本身。最后再分享一个小习惯每次搭建完新项目我都会抽出十分钟做一次“骨架体检”大致包括检查依赖是否有废弃版本、路由是否全部懒加载、全局组件是否真的有必要注册、公共样式里有没有无用代码等等。这种体检看着不起眼但能让项目从一开始就保持干净等团队规模变大、业务迭代变快时你会感谢最初那个愿意多花十分钟的自己。Vue3项目搭建这件事说到底是把一堆看似琐碎的事情安排明白脚手架只是起点真正的差距在后续的配置、规范和排坑能力上。