如何选择合适的前端框架_开发初级项目时的框架选择指南

初级项目应选能3小时内跑起完整页面的框架：vue 3用html内联+createapp，react用Reactdom.render+react-router-dom@5，Svelte用onMount处理副作用，避免过早引入复杂特性。

开发初级项目时，不需要为“未来扩展性”提前上 React + typescript + webpack + 微前端这套组合；选框架的核心标准是：能否在 3 小时内跑起一个带表单、列表、路由跳转的完整页面，且你不用反复查文档补基础概念。

Vue 3 的 createApp 足够轻但别直接上 defineComponent

新手用 Vue 最容易卡在“为什么组件没渲染”——往往是因为过早用了 defineComponent 或 setup 语法，而漏了 app.mount() 或模板写法不匹配。对初级项目，推荐从最简 HTML 内联模式起步：

 
{{ message }}
 

• 不引入构建工具，不配 vite，不碰 Composition API
• data() 返回对象比 setup() 更贴近直觉，状态变更也无需 ref() / reactive() 判断
• 后续加路由？直接换 vue-router@4 的 createWebHashHistory，不用 createWebHistory（免配服务器）

React 初学慎用 createRoot，优先试 ReactDOM.render（v17 兼容模式）

React 官方文档默认展示 createRoot，但它要求你理解并发渲染、StrictMode 的双调用等隐含行为。初级项目跑不起来，90% 出现在这里：

• 错误信息：TypeError: ReactDOM.createRoot is not a function → 实际是用了旧版 react-dom（17 以下）
• 正确做法：CDN 引入 react@17 + react-dom@17，用 ReactDOM.render(, root)
• 路由别碰 react-router@6 的嵌套路由和 loader，先用 react-router-dom@5 的 BrowserRouter + Switch

Svelte 没有虚拟 DOM，但 $: 声明式逻辑容易误写成同步阻塞

Svelte 编译时生成原生 js，启动快、包体积小，适合静态内容为主的初级项目（如产品介绍页、问卷收集页）。但新手常把响应式声明写成：

立即学习“前端免费学习笔记（深入）”；

• $: 是编译期响应式逻辑，不是“监听回调”，避免在里面写副作用（如 fetch、console.log、DOM 操作）
• 需要发请求？用 onMount；需要根据 props 更新状态？用 $: + 纯计算，再用 $$props 显式接收
• 不要试图用 Svelte 模拟 Vue 的 v-model 行为——它没有指令系统，双向绑定靠 bind:value，且仅支持原生表单元素

真正卡住初级开发的，从来不是框架功能强弱，而是“哪一行代码该写在哪、报错信息指向哪个环节、改完要不要刷新页面”。选框架前，先花 10 分钟跑通它的最简 Hello World，而不是读完官方 Quick Start 里的第五个步骤。