Dreamer寻新项目启动，前端负责人跑过来问我：“技术栈用啥？React还是Vue？要不要上TypeScript？工程化你帮我把把关。”这个场景我经历过太多次了。很多人觉得前端框架搭建就是从脚手架里挑一个模板，跑起来就完事。但真正到了项目中期，组件乱放、请求层没人管、权限逻辑散落在各个页面、构建慢到让人想摸鱼——这些问题的根源，往往都能追溯到框架搭建那几天的决策。
这篇东西，就是我基于多次从零搭建项目前端框架的经验，完整复盘一遍从技术选型、工程初始化、代码规范、请求层设计到权限落地的全过程。适合刚接手新项目的前端负责人、准备脱离纯业务的开发同学，以及想系统化理解前端工程化的人。内容不浮夸，每一步都有取舍理由，也附上了我踩过的坑。
1. 技术选型：别追新，先看团队和业务
1.1 框架选择的底层逻辑
选前端框架这件事，我见过太多人拍脑袋。有人因为GitHub star多就选，有人因为某篇爆款文章就换，最后项目做了一半发现生态跟不上、招人费劲、团队成员学不动，苦不堪言。
我选框架的核心逻辑只有四个维度：团队熟悉度、业务场景匹配度、生态成熟度、长期维护成本。这四个维度按权重排序，团队熟悉度往往要排第一。再好的框架，团队没人写过，效率必然打折。业务场景决定了你需要的框架特性——如果你的业务是重度交互的中后台系统，Vue的响应式模型和React的Hooks都能胜任，但如果你要做一个数据可视化大屏或实时协作工具，React生态里可选的库会更丰富。生态成熟度解决的是“遇到问题能不能找到答案”的问题，这对开发效率影响极大。
技术选型不是技术问题，是管理问题。我后来做选型时都会开一次团队会议，让核心成员各自调研、投票、陈述理由。这个过程既统一了认知，也防止了“一个人拍板，全团队躺平”的情况。
1.2 Vue还是React：不要迷信“最终答案”
React和Vue之争，社区里吵了很多年，到今天已经没必要站队了。我的经验是：代码写得烂的人，用什么框架都能写出烂代码；框架本身的差异，远没有团队规范和工程化水平带来的差异大。
Vue的优势是上手曲线平滑，模板语法直白，适合大多数中后台场景，而且Vue 3的组合式API在逻辑复用方面补齐了Options API的短板。React的优势是函数式思维彻底、生态大、灵活度高，但它的灵活性也是一把双刃剑——同一个项目里，一百个人可能写出一百种风格，如果没有强力的架构约束，后期维护成本会很高。
如果你的项目是大型中后台管理系统，且团队以Vue为主，我建议直接选Vue 3 + TypeScript + Vite。如果你的项目面向C端重交互场景，或者团队React基础更扎实，那选Next.js或React + Vite的组合也没问题。重点不是哪个好，而是你选定之后能否建立一套可执行、可持续的规范体系。框架搭建的真正分水岭，从来不是框架本身，而是你在这套框架上长出来的工程化能力。
1.3 UI组件库与“前端好看的框架”这个后端都爱提的需求
很多非技术同事会跟我提“前端好看的框架”，翻译过来就是“页面必须好看、拿得出手”。这一点很现实——中后台项目的体验，直接决定了客户对产品的第一印象。UI组件库的选型，是这里面的关键牌。
我的惯例是：
| 场景 | 推荐方案 | 理由 |
|---|---|---|
| 中后台管理系统（Vue技术栈） | Element Plus + 定制主题 | 成熟稳定、组件全、文档好 |
| 中后台管理系统（React技术栈） | Ant Design 5.x | 设计语言统一、业务组件生态好 |
| 极简风格 | Naive UI / Arco Design | 设计更现代、颜值在线 |
| C端落地页 | Tailwind CSS + 无头组件库 | 可以做出强设计感且不千篇一律 |
“好看的框架”背后另一个常被忽略的点是设计规范。你可以把组件库的主题变量统一管理，传入设计团队的色彩规范、圆角规范、间距规范，让整个项目用一套令牌驱动样式，这样出来的页面才不是“组件库默认脸”。如果团队里有设计资源，这一步非常值得花时间；没有的话，直接把知名开源后台模板的主题变量拿来改，也比裸用组件库强得多。
提示：选组件库前，先确认它是否支持你的构建工具和框架版本。Element Plus在Vue 3配合Vite下体验很好，但老版本Element UI是配Vue 2的，这个细节经常有人搞混。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 工程化初始化：把Vite配置和目录设计一次想清楚
2.1 为什么我坚定切换到Vite
早期用Webpack搭项目，启动慢、配置繁琐，最难受的是改个配置还要各种查文档。后来全面切到Vite，开发体验是质的飞跃。Vite基于原生ES Module，本地开发按需编译，项目大了也不会卡成PPT；底层用Rollup做生产构建，产物质量有保证。
Vite对Vue 3和React都有官方模板，执行一条命令就能跑起来。但我强烈建议不要直接拿默认模板就开干，必须做几件事：补TypeScript严格配置、加路径别名、配代理、设置打包分析。
初始化的命令很简单：
bash复制# Vue 3 + TypeScript
npm create vite@latest my-project -- --template vue-ts
# React + TypeScript
npm create vite@latest my-project -- --template react-ts
cd my-project
npm install
安装完之后，项目能跑，但这只是地基的第一步。你还得手动加依赖、改配置，一点也偷不了懒。
2.2 路径别名的意义不止是少打几个字
很多初学者不理解为什么要配路径别名，觉得../../components/xxx也能用。但一个深层嵌套的业务组件里，../../../..这种相对路径会让你怀疑人生，更致命的是——当你重构目录结构时，所有相对路径全是隐性炸弹。
在vite.config.ts里配置：
typescript复制import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'
export default defineConfig({