Vue3项目现在主流用什么工作流？能具体拆解每个环节的作用和坑吗？

你有没有刚从Vue2转Vue3,或者第一次搭Vue3项目就被一堆工具搞晕的经历？比如选Vite还是Webpack，TypeScript要不要强制加，Pinia/Vuex选谁，代码提交要不要加规范，部署的时候怎么优化更快……这些问题其实都是「Vue3项目工作流」里的小事，但串起来搭一套顺手的、高效的，甚至能避免团队内耗的，就需要好好捋捋了。

我自己搭过个人博客、小型电商原型、还有3人小团队做的内部OA前端，踩过不少坑也攒了一些经验，今天就结合当前社区用得最多的组合，一步步拆主流Vue3前端工作流，每个环节说清楚作用、常用工具、以及新人/老手容易忽略的坑。

从0到1搭Vue3项目的第一环节：脚手架选型

很多新人可能一开始会被官方两个选项搞懵——Vue CLI怎么突然不更新了？Vite又是个什么东西？没错，现在Vue官方主推的肯定是Vite，Vue CLI虽然还能跑，但从开发体验和社区生态更新速度来说，已经没必要用它搭新项目了。

这里得提一下Vite的核心优势,为什么能这么快取代Webpack在Vue3甚至整个前端的地位？一是开发服务器启动和热更新都是毫秒级的，它利用了浏览器原生支持的ES Module，开发阶段不用把所有代码打包成一个或几个大文件，浏览器访问哪个模块就加载哪个；二是默认集成了TypeScript、Vue单文件组件、PostCSS这些常用配置，不用像以前用Webpack那样写几百行配置文件；三是插件生态越来越全了，很多Webpack的常用插件现在都有Vite版本，甚至还出现了更轻量的替代品。

那有没有不能用Vite的场景？其实很少了，但如果你的项目必须兼容IE11，那还是得选Vue CLI，因为Vite开发阶段不转ES5，生产打包虽然能转，但需要加很多额外的插件和polyfill，体验会比Webpack差一些，不过说实话，现在国内主流互联网公司的产品都已经放弃IE11了，除非是对接特殊政务或企业系统，否则不用考虑。

选好脚手架之后,接下来就是创建项目时的选项问题了，官方的create-vue@latest工具会问你要不要加TypeScript、Router、Pinia、ESLint、Prettier、Cypress这些，这里的建议是：个人练手项目可以不加TS和自动化测试，但小团队以上的正式项目必须全加，先别急着反驳，后面会专门说TS、ESLint这些规范工具的坑和好处，你看完就知道为什么团队必须加了。

代码编写阶段：选对库和规范能省80%的后期维护成本

核心库组合：Vue3 + TS + Router + Pinia + Element Plus/Ant Design Vue

这几个是当前社区公认的「黄金组合」，新人练手可以简化，但正式项目基本都是这个配置。

首先说TypeScript,很多人觉得它啰嗦，写个变量还要加类型，以前用Vue2写得好好的，现在加了反而容易报错，但你有没有遇到过这种情况：项目写了一半，忘记某个组件的props或者store里的state是什么类型了，得翻半天代码；或者上线前改了一个API返回的字段，结果整个页面都报错了，只能一行一行查；或者团队协作的时候，你写了一个函数，同事传了错误的参数，他找半天找不到原因，你也得跟着改半天测试，TypeScript就能完美解决这些问题，它能在代码编写阶段就把这些错误检查出来，不用等到编译或上线的时候，而且配合VS Code的智能提示，写代码的速度其实会比纯JavaScript更快。

那新手怎么快速上手TypeScript写Vue3？其实不用一开始就把所有语法都学会，先掌握几个常用的就行：比如用interface定义props和state的类型，用type定义联合类型和交叉类型，用ref、reactive的泛型指定响应式数据的类型，用defineProps和defineEmits的泛型写法（这种写法比写运行时验证更简洁，而且智能提示更准），还要注意，官方推荐用<script setup lang="ts">语法，这是Vue3最核心的语法糖，比Options API写起来更简洁，更符合函数式编程的习惯，而且TS支持也更好。

然后是Pinia,它现在已经是Vue官方推荐的状态管理库了，完全取代了Vuex的地位，Pinia比Vuex好在哪里？首先是更简洁，没有了mutations这个中间层，直接在actions里修改state就行；其次是TS支持更好，不用写一大堆类型声明文件；第三是体积更小，压缩后只有2KB左右；第四是支持模块拆分，每个模块都是独立的，不用像Vuex那样把所有东西都放在一个store里，后期维护起来更方便，新人学Pinia的话，先记住三个核心概念：state（状态）、getters（计算属性）、actions（方法），会这三个就能做大部分项目了，等后面项目变大了再学模块拆分。

UI组件库的话,现在主流的就是Element Plus和Ant Design Vue，这两个都是大厂出品，质量有保证，社区生态也很全，Element Plus的优点是上手简单，组件丰富，适合快速开发后台管理系统；Ant Design Vue的优点是设计风格更统一，国际化支持更好，组件功能更强大，适合做中大型企业级项目，个人练手的话随便选一个就行，团队项目的话可以根据设计师的风格和团队成员的熟悉程度来选。

代码规范工具：ESLint + Prettier + Husky + lint-staged

很多人觉得代码规范工具是“反人类”的，写代码的时候动不动就报红报黄，影响心情，但你有没有经历过团队协作的时候，你用4个空格缩进，同事用2个空格缩进；你用单引号，同事用双引号；你写了一行1000个字符的代码，同事要翻半天才能看完；或者有人提交了垃圾代码，结果整个项目的代码质量都下降了？这些规范工具就是用来解决这些问题的，它能统一整个团队的代码风格，提高代码的可读性和可维护性，还能在代码提交前就把垃圾代码拦截下来。

这里要注意几个坑：第一个是ESLint和Prettier的冲突问题，ESLint主要负责检查代码语法和逻辑错误，Prettier主要负责格式化代码风格，两个工具的功能有重叠，所以会产生冲突，解决方法也很简单，用eslint-plugin-prettier和eslint-config-prettier这两个插件就行，eslint-plugin-prettier会把Prettier的规则作为ESLint的规则来运行，eslint-config-prettier会关闭ESLint中与Prettier冲突的规则；第二个是Husky和lint-staged的配置问题，Husky是用来配置Git钩子的，lint-staged是用来只检查暂存区文件的，这样不用每次提交都检查整个项目的代码，速度更快，配置的时候要注意，Husky 9.x版本的配置方式和以前的旧版本不一样，新人如果跟着旧教程走很容易踩坑，最好直接看官方最新的文档；第三个是不要把规则设置得太严格，比如强制要求每个函数都要有注释，强制要求变量名必须超过5个字符，这样会严重影响开发效率，反而适得其反，应该选一些大家都能接受的、对代码质量有帮助的规则，比如禁止使用var，禁止使用console.log（生产环境），禁止写没有使用的变量，统一缩进和引号等等。

开发工具插件：Volar + Vue DevTools + Auto Import + Unplugin Vue Components

这几个是VS Code里写Vue3必备的插件，能大大提高开发效率。

Volar,它是专门为Vue3开发的语言服务插件，比以前的Vetur好用很多，支持<script setup>语法，支持TS，支持智能提示，支持跳转定义，支持格式化等等，记得把Vetur卸载了，不然会和Volar冲突；然后是Vue DevTools，它是Vue官方出品的浏览器调试工具，比以前的旧版本更新了很多功能，比如可以直接查看Pinia的state和actions，可以直接修改响应式数据，可以查看组件的渲染时间，可以查看组件的props和emit等等，Chrome和Firefox都有；然后是Auto Import和Unplugin Vue Components，这两个都是Vite的插件，Auto Import可以自动导入Vue的API（比如ref、reactive、computed这些）和第三方库的API（比如Pinia的useStore这些），不用每次都手动import；Unplugin Vue Components可以自动导入UI组件库的组件（比如Element Plus的el-button这些），不用每次都手动import和注册，这两个插件配合使用，能省很多代码。

开发调试阶段：除了console.log，还有这些好用的工具

很多人调试代码只会用console.log，虽然console.log确实很方便，但对于复杂的项目来说，用专门的调试工具会更快更高效。

首先说Vue DevTools刚才已经提过了，就不多说了；然后是浏览器的开发者工具，除了常用的Elements、Console、Network这几个面板，还有Performance和Lighthouse这两个面板也很好用，Performance面板可以查看页面的渲染时间，找出性能瓶颈，Lighthouse面板可以检测页面的性能、可访问性、最佳实践、SEO这几个方面，给出优化建议；然后是Vite的调试模式，你可以在package.json的scripts里加一个"dev:debug": "vite --mode debug --host"，这样就可以在局域网里访问项目了，方便在手机或其他设备上调试，-mode debug可以设置一些调试用的环境变量；最后是VS Code的调试功能，你可以在项目根目录下创建一个.vscode/launch.json文件，配置好之后，就可以在VS Code里打断点调试代码了，比在浏览器的控制台里打断点更方便。

这里要注意一个坑：用Auto Import插件自动导入Vue的API的时候，如果在VS Code里打断点，可能会找不到对应的源文件，因为Auto Import会在项目根目录下生成一个auto-imports.d.ts文件，这个文件是虚拟的，解决方法也很简单，在launch.json文件里加一个"resolveSourceMapLocations": ["**/*.js", "**/*.ts", "!**/node_modules/**", "!**/auto-imports.d.ts"]就行。

生产打包阶段：优化这几点，页面加载速度能快一倍

很多人写完代码直接就打包部署了,结果页面加载速度特别慢，用户体验很差，其实只要优化几个小细节，页面加载速度就能快一倍。

Vite的默认优化,Vite在生产打包的时候已经做了很多优化了，比如Tree Shaking（删除没有使用的代码）、Code Splitting（代码分割，把大文件拆成小文件）、压缩代码（压缩JS、CSS、HTML）、生成Hash文件名（方便缓存更新）等等，但这些默认优化还不够，我们可以再加一些额外的优化；然后是图片优化，图片是页面加载体积最大的部分之一，所以一定要优化图片，常用的优化方法有：压缩图片大小（可以用tinypng网站或者vite-plugin-imagemin插件）、使用WebP格式的图片（WebP格式的图片比JPG、PNG格式的小很多，而且兼容性现在也很好了，除非是必须兼容IE11）、使用懒加载（vue3自带懒加载指令v-lazy，或者用vue-lazyload插件）、使用雪碧图（把小图标合并成一张大图片，减少HTTP请求次数）；然后是CDN加速，把静态资源（比如JS、CSS、图片、字体这些）上传到CDN，用户访问的时候可以从离自己最近的CDN节点获取资源，速度会快很多；然后是路由懒加载，这个Vue Router已经默认支持了，只要用动态import的方式引入路由组件就行，比如const Home = () => import('./views/Home.vue')，这样用户访问哪个路由就加载哪个路由的代码，不用一开始就加载整个项目的代码；然后是删除生产环境的console.log和debugger，这个可以用terser插件来实现，Vite生产打包的时候已经默认安装了terser，只要在vite.config.ts里加一句build: { terserOptions: { compress: { drop_console: true, drop_debugger: true } } }就行；最后是开启Gzip或Brotli压缩，这个可以用vite-plugin-compression插件来实现，Gzip压缩可以把文件体积减小60%左右，Brotli压缩可以把文件体积减小70%左右，不过Brotli压缩需要服务器支持，现在主流的服务器（比如Nginx、Apache）都已经支持了。

这里要注意几个坑：第一个是vite-plugin-imagemin插件的安装问题，这个插件依赖一些二进制文件，国内网络环境不好的话很难安装成功，解决方法是用淘宝镜像或者pnpm来安装；第二个是路由懒加载的Chunk命名问题，默认情况下Vite生成的Chunk文件名是一串Hash值，很难区分，我们可以用魔法注释来指定Chunk的名字，比如const Home = () => import(/* webpackChunkName: "Home" */ './views/Home.vue')，哦不对，Vite用的魔法注释是/* @vite-ignore */或者/* @vitejs/plugin-vue-jsx: jsxPure */，Chunk命名的话直接在import后面加/* viteChunkName: "Home" */就行；第三个是Gzip或Brotli压缩的部署问题，压缩之后会生成对应的.gz或.br文件，我们需要配置服务器让浏览器优先加载压缩后的文件，比如Nginx的配置就是加几句gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml; gzip_vary on;，Brotli的配置就是加几句brotli on; brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;。

部署上线阶段：CI/CD是解放双手的最好工具

很多人部署上线还是手动打包、手动上传到服务器、手动重启服务，这种方式不仅效率低，而且容易出错，比如忘记更新某个文件，或者打包的时候用的是开发环境的配置，结果上线之后报错，CI/CD（持续集成/持续部署）就是用来解决这些问题的，它能自动完成代码提交、代码检查、代码测试、生产打包、部署上线这一系列流程，只要你把代码推送到GitHub、GitLab这些代码托管平台，剩下的事情全交给CI/CD就行。

现在主流的CI/CD工具有GitHub Actions、GitLab CI/CD、Jenkins、Travis CI等等，如果你用的是GitHub的话，推荐用GitHub Actions，因为它是免费的（公共仓库无限使用，私有仓库每月有2000分钟的免费额度），而且配置简单，和GitHub的集成度很高。

配置GitHub Actions的话，也很简单，只要在项目根目录下创建一个.github/workflows/deploy.yml文件，然后写好配置就行，配置内容大概包括：触发条件（比如推送到main分支）、运行环境（比如Ubuntu最新版）、步骤（比如拉取代码、安装依赖、代码检查、代码测试、生产打包、部署到服务器）。

这里要注意几个坑：第一个是服务器的SSH密钥问题，你需要把服务器的私钥添加到GitHub仓库的Secrets里，然后在配置文件里用这个私钥连接服务器；第二个是Node.js的版本问题，你需要在配置文件里指定和你本地开发环境一样的Node.js版本，不然可能会出现依赖安装失败或者打包失败的问题；第三个是生产环境的环境变量问题，你需要把生产环境的环境变量（比如API地址）也添加到GitHub仓库的Secrets里，然后在配置文件里用这个环境变量打包，或者在部署的时候通过Nginx或者PM2的环境变量来设置。

后期维护阶段：监控和日志是发现问题的关键

很多人部署上线之后就不管了,结果用户反馈页面打不开或者报错了，自己还不知道，这时候监控和日志就很重要了。

首先说前端监控,现在主流的前端监控工具有Sentry、LogRocket、Fundebug、阿里云ARMS前端监控等等，这些工具可以监控页面的性能、错误、用户行为等等，一旦出现问题会及时给你发邮件或短信通知，你还可以通过这些工具查看错误的堆栈信息、用户的操作步骤、页面的截图等等，快速定位问题并解决。

然后是前端日志,很多人觉得前端日志不重要，只有后端需要日志，但其实前端日志也很重要，比如你可以通过前端日志查看用户的访问量、用户的浏览器版本、用户的设备型号、用户的操作路径等等，这些数据可以帮助你优化产品，前端日志可以用console.log（但生产环境要删除，或者只保留关键的日志），也可以用专门的日志库，比如log4javascript、winston-browser等等，这些库可以把日志发送到后端服务器，方便你集中管理。

总结一下

现在主流的Vue3前端工作流大概就是：用create-vue@latest创建项目（选Vite、TS、Router、Pinia、ESLint、Prettier、Cypress这些）→ 用Vue3 + TS + Router + Pinia + Element Plus/Ant Design Vue编写代码 → 用ESLint + Prettier + Husky + lint-staged统一代码风格 → 用Volar + Vue DevTools + Auto Import + Unplugin Vue Components提高开发效率 → 用浏览器开发者工具、Vite调试模式、VS Code调试功能调试代码 → 用图片优化、CDN加速、路由懒加载、删除console.log、开启Gzip/Brotli压缩优化生产打包 → 用GitHub Actions/GitLab CI/CD实现CI/CD → 用Sentry/Fundebug监控前端错误，用log4javascript/winston-browser记录前端日志。

这个工作流不是固定的,你可以根据自己的项目需求和团队情况进行调整，比如个人练手项目可以不加TS和自动化测试，中大型企业级项目可以加单元测试和E2E测试，可以加代码覆盖率工具，可以加Docker容器化部署等等。

最后想说的是,工作流只是工具，核心还是要把代码写好，把产品做好，不过一套顺手的、高效的工作流确实能帮你省很多时间，让你把更多的精力放在核心业务上。